0

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

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

多谢

4

3 回答 3

2

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

设置.him为width:50%,height:50%如果未设置父级的尺寸，则相当无用。由于 0 的 50% 也是 0，因此您看不到它。在这种情况下，您需要在父对象上设置高度/宽度，在这种情况下为.mmm.

由于尺寸已设置为 on .wrapper，您可以将其用作父级。在这里看到这个jsFiddle

假设您将元素放置在预定义尺寸的父级中，这将起作用。看到这个 jsFiddle。

于 2013-10-29T17:32:04.157 回答
0

divhim取其父 div 的 50% 高度和宽度，父 div 是mmm，它的高度和宽度为 0。0 的 50% 为 0。

于 2013-10-29T17:32:49.800 回答
0

虽然这有点 hacky，但您可以使用 jQuery（或本机 javascript）在父级加载后设置子 div 的高度吗？

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

$(document).ready(function() {
    $('.him').css("height", $('.wrapper').height() / 2);
});
于 2013-10-29T17:36:36.690 回答