Question

我在将div放在另一个div中时遇到问题，这个div的高度定义为400px。

当我将内部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/

Answer 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在父div之外：100％

1 个答案: