Question

我有一个固定的高度包装（由javascript使用window.innerHeight设置），我有一个由我正在使用的cms生成的嵌套div的inifite serie。嵌套非常深，这是我的网络结构。问题是，如果我向web结构的div添加一个百分比高度，那么在到达包装器之前有太多的空白div并且它不起作用。我的webtructure之前的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%}
*/

如评论中所述，我必须在到达我的所有嵌套div之前给出高度：100％（其高度应为50％）。

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

非常感谢

Answer 1

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

如果未设置父级的维度，则将.him设置为width:50%，而height:50%则无用。因为0的50％也是0，所以你没有看到它。在这种情况下，您需要在父级上设置高度/宽度，在本例中为.mmm。

由于已在.wrapper上设置维度，因此您可以将其用作父级。见jsFiddle here

这可行，假设您将元素放在预定义维度的父元素中。 See this jsFiddle

Answer 2

虽然这有点hacky，你可以使用jQuery（或原生javascript）来设置父级加载后子div的高度吗？

http://jsfiddle.net/remus/BXwcP/3/

$(document).ready(function() {
    $('.him').css("height", $('.wrapper').height() / 2);
});

Answer 3

div him占据其父div的50％高度和宽度，父div为mmm，高度和宽度为0. 50％的0为0.

嵌套div上的100％高度

3 个答案: