为什么当我使用 height:100% 时 div 在父 div 之外答案

【问题标题】：Why is div outside of parent div when i use height:100%为什么当我使用 height:100% 时 div 在父 div 之外
【发布时间】：2018-02-22 00:33:06
【问题描述】：

我在将一个 div 放置在另一个定义高度为 400 像素的 div 中时遇到问题。

当我将内部 div 设置为 100% 时，它会与外部 div 重叠并越过外部 div。为什么不是 100% 高度将内部 div 调整为外部 div 高度？

body {
  min-width:300px;
}

.header {
  background-color:pink;
  width:100%;
  height:400px;
}

.menu {
  background-color: red;
}

.header-container {
  color:white;
  background-color:gray;
  height:100%;
  max-width:400px;
  margin:auto;
}

.headline {
  padding-right:36px;
  padding-left:36px;
  padding-top:54px;
  padding-bottom:54px;
}

.clearfix {
  clear:both;
}

<div class="header">
  <div class="menu">
  menu
  </div>
  <div class="header-container clearfix">
    <div class="headline">
      <span>das ist mein blog</span>
      <span>this is the underline</span>
    </div>
  </div>
</div>
<div class="blog">
y
</div>
<div class="footer">
x
</div>

https://jsfiddle.net/g9ec4nw8/

【问题讨论】：

因为外层 div 有填充
我想是因为 100% 意味着……所有高度。如果您想要剩余高度...那就不同了，这里有很多问题。
但我想让那些填充没有菜单上的内部 div 棒。
重复？ - stackoverflow.com/questions/90178/…

标签： html css

【解决方案1】：

因为.header-container 上的填充导致溢出。

将box-sizing: border-box; 添加到您的.header-container，将解决盒子大小问题。

但不仅如此，你的.menu还没有考虑到18px的高度。

将您的.header-container 更改为以下代码：

.header-container {
        color:white;
        background-color:gray;
        height:calc(100% - 18px);
        max-width:400px;
        box-sizing: border-box;
        margin:auto;
        top:0;
        bottom:0;
        padding-right:36px;
        padding-left:36px;
        padding-top:54px;
        padding-bottom:54px;
 }

将解决问题。

小提琴Here.

【讨论】：

这意味着如果我有多个容器，假设内部 div 的高度为 100px + 10px + 50px，那么我必须从内部 div 的高度中减去 160px。很好奇，但现在似乎可以工作了。这是一个好习惯吗？
对于固定高度的布局，这只是真正的解决方案，因为通过指定固定高度，您是在告诉浏览器永远不要更改大小。您需要针对该场景进行开发。 calc() 是一个 CSS3 函数，实际上非常有用！
无论菜单的高度如何，Flexbox 都可以做到这一点。这就是链接的问答所解释的内容。
@Paulie：谢谢。我会将这个标记为答案，因为它直接回答了我的问题，但今天也会学习“flexbox”。非常感谢！