野生动物园 - 儿童元素的高度比父

Question

更多我有3个DIV，它看起来像这样：

<div class="parent"> 
    <div class="header"></div> 
    <div class="content"></div> 
</div> 

.parent的高度为100％ 高度.header的是50像素 高度。内容是100％

在Chrome中它工作正常，但在Safari中，.content和.header的高度大于.parent高度。

例如，如果.parent是600px。 .header和.content的高度是700px。

我试过cal（100％ - 50px），然后它适用于Safari，但在Chrome中，.content高度更短。

请帮忙。 谢谢。

Answer 1

它不计算钙。 我认为这不是一个错误，因为你有100％的内容高度，这将成为父母的相同大小和标题的添加高度，这就是为什么他的.content和.header的高度高于.parent高度。

检查此笔计算的是工作的罚款：https://codepen.io/adrianrios/pen/OmRXpE

*{ 
    box-sizing: border-box; 
} 
.parent{ 
    height: 300px; 
    width: 50%; 
    margin: auto; 
    background: pink; 
} 

.header{ 
    width: 100%; 
    height: 50px; 
    border: 1px solid red; 
} 

.content{ 
    width: 100%; 
    height: calc(100% - 50px); 
    border: 1px solid blue; 
}