html - Safari - 子元素高度超过父元素

Question

我有 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 高度更短。

请帮忙。谢谢。

Answer 1

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