野生動物園 - 兒童元素的高度比父

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; 
}