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

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

检查此笔，calc工作正常：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;
}

Safari - 子元素高度超过父

1 个答案: