Safari - 子元素高度超过父元素答案

【问题标题】：Safari - Children elements height more than parentSafari - 子元素高度超过父元素
【发布时间】：2017-04-24 17:11:14
【问题描述】：

我有 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 为 600 像素。 .header 和 .content 的高度为 700px。

我尝试使用 cal(100% - 50px) 然后它适用于 Safari，但在 Chrome 中，.content 高度更短。

请帮忙。谢谢。

【问题讨论】：

你能给我们看看你的 CSS 吗？
是的，请给我们看代码

标签： html css safari

【解决方案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;
}

【讨论】：