嵌套 div 的 100% 高度答案

【问题标题】：100% height on nested divs嵌套 div 的 100% 高度
【发布时间】：2013-11-09 00:23:01
【问题描述】：

我有一个固定高度的包装器（由 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 提供 height: 100%。

有没有这种行为可以绕过？

非常感谢

【问题讨论】：

标签： css responsive-design height

【解决方案1】：

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

如果没有设置父级的尺寸，将.him 设置为width:50% 和height:50% 将毫无用处。由于 0 的 50% 也是 0，因此您看不到它。在这种情况下，您需要在父对象上设置高度/宽度，在本例中为 .mmm。

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：