我有 3 个 div,它看起来像这样:
<div class="parent">
<div class="header"></div>
<div class="content"></div>
</div>
.parent 的高度为 100% .header 的高度为 50px .content 的高度为 100%
在 Chrome 中它工作正常,但在 Safari 中,.content 和 .header 的高度超过了 .parent 的高度。
例如,如果 .parent 为 600px。 .header 和 .content 的高度为 700px。
我试过使用 cal(100% - 50px) 然后它适用于 Safari 但在 Chrome 中,.content 高度更短。
请帮忙。 谢谢。
最佳答案
它是 calc 不是 cal。 我认为这不是一个错误,因为您有 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;
}
关于html - Safari - 子元素高度超过父元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43583145/