Question

为什么#red元素在其CSS明确表示height: 100%时比其父元素大？

＆＃13;

#black {
  background-color: black;
  padding: 5px;
  max-height:50px;
}

#red {
  background-color: red;
  padding: 5px;
  height:100%;
}

#grey {
  background-color: grey; 
  height: 100px; /* The height is just used as an exemple, it cannot be known.  */
  max-height: 100%;
}

＆＃13;

<div id="black">
    <div id="red">
      <div id="grey"></div>
    </div>
</div>

＆＃13;

因为有些答案似乎并不了解需要，这意味着我不清楚我的目的（我的不好，对不起）。

我想要的是什么：

#red元素与其父元素具有相同的高度，#black元素（所以没有滚动条，没有溢出，没有隐藏空间）。 #black元素的高度可能会发生变化（因此它不能具有精确的高度），但与max-height有关。

Answer 1

#black没有height（它有一个max-height）。

因此，忽略所有其他height或max-height或100%，因为未知的100%未知。

#red身高的唯一原因是因为它的孩子 - #grey - 身高100px

在max-height: 50px上将height: 50px更改为#black，您将看到一切正常运作：

＆＃13;

#black {
  background-color: black;
  padding: 5px;
  height:50px;
}

#red {
  background-color: red;
  padding: 5px;
  height:100%;
}

#grey {
  background-color: grey; 
  height: 100px; /* The height is just used as an exemple, it cannot be known.  */
  max-height: 100%;
}

＆＃13;

<div id="black">
    <div id="red">
      <div id="grey"></div>
    </div>
</div>

＆＃13;

Answer 2

溢出是由#grey div的高度100px引起的 #red div的高度继承自#grey div的高度。

如果您希望#black div与其孙子的高度相同或更大，请执行以下操作之一：
1）增加#black div的大小或
2）为#black div设置固定高度，以便子元素中的100%可以具有引用点。目前100%没有任何意义，因为父元素中没有固定的高度，因为它具有相对大小。

希望有所帮助！

Answer 3

我忽略了高度/最大高度问题，因为它已经被其他2个答案写了。

你在这里尝试的是一个逻辑问题，红色div包含灰色，因此它必须大于200px（顶部5px +底部5px），因为它没有定义溢出，超出了100％（90 px）。

要解决此问题，设置滚动条属性
溢出/溢出-y
每个都可以设置为可见，隐藏，滚动，自动或继承中的任何一个。

自动 - 仅在需要时添加滚动条滚动 - 强制滚动条

为什么CSS高度100％溢出父级？

3 个答案: