css - 嵌套 div 的 100% 高度

Question

我有一个固定高度的包装器(由 javascript 使用 window.innerHeight 设置)，我有一个由我正在使用的 cms 生成的无限系列嵌套 div。嵌套很深，这是我的网络结构。问题是，如果我向我的网络结构的 div 添加一个百分比高度，在到达包装器之前会有太多空白 div，它就不起作用。我的 webstructure 之前的 div 只有动态 ID，我不能使用它们。

我在这里复制了一个非常简单的例子:http://jsfiddle.net/omegaiori/BXwcP/1/

html

<div class="wrapper">
<div class="mmm">
    <div></div>
    <div class="him"></div>
</div>

CSS

    .wrapper {
    width:500px;
    height:500px;
    background:red;
}
.him {
    width:50%;
    height:50%;
    background:yellow;
}
/* only works if you uncomment this 
.mmm {height:100%}
*/

如评论中所述，我必须在到达我的(应该有 50% 的高度)之前为所有嵌套的 div 提供 height: 100%。

无论如何可以绕过这种行为吗？

非常感谢

Answer 1

当您使用基于百分比的宽度/高度定义元素时，还需要指定父元素的尺寸。

将 .him 设置为 width:50% 和 height:50% 如果未设置父级的尺寸，则毫无用处。因为 0 的 50% 也是 0，所以你看不到它。在这种情况下，您需要在父级上设置高度/宽度，在这种情况下为 .mmm。

由于尺寸已经在 .wrapper 上设置，您可以将其用作父级。看这个jsFiddle here

假设您将元素放置在预定义维度的父元素中，这将起作用。 See this jsFiddle .