强制嵌套 div 的最小高度为 100%？答案

【问题标题】：Force nested divs to have min-height of 100%?强制嵌套 div 的最小高度为 100%？
【发布时间】：2012-08-08 15:11:56
【问题描述】：

我知道min-height: 100% 仅在父元素具有某个高度数值的情况下才能占用其父元素高度的至少 100%，但是如果我有一些嵌套的 div 并且我想要它们全部怎么办最小高度为 100%？我试过min-height:inherit，但也没有用？我知道我可以通过简单地检查文档加载时的浏览器高度值然后将其分配给嵌套 div 的 min-height 属性来使用 JavaScript 解决这个问题，但我想知道是否可以解决这个问题只有css？

编辑：我还应该提到，我需要最外层的 div 和嵌套的 div 都具有 100% 的最小高度，以便它们至少占据浏览器的高度，但如果需要，请扩展。

【问题讨论】：

标签： css layout position height

【解决方案1】：

min-height: inherit; 应该可以工作：http://jsfiddle.net/ugxbs/

编辑

至于百分比值和预期行为，嵌套 min-height 背后没有逻辑。你应该做的是为所有父母使用height属性，然后将min-height添加到最里面的DIV。

F.ex:

<html>
    <body>
        <div class="outer">
            <div class="inner"></div>
        </div>
    </body>
</html>

CSS：

html, body, .outer { height: 100% }
.inner { min-height: 100%; }

http://jsfiddle.net/4PsdT/

这样，您告诉浏览器将所有外部元素从顶部 (HTML) 设置为 100% 的高度。这将使这些元素在浏览器高度上伸展。然后只需将min-height 添加到包含内容的最里面的元素。

设置height不代表会掉出儿童过多的内容，除非你加上overflow:hidden;。

【讨论】：

我知道当最外面的 div 有一个 min-height 的数值时它会起作用，但是当最外面的 div 有一个 min-height 的百分比时它会失败（这是我需要的我的情况）。我需要所有嵌套的 div 至少占据浏览器窗口的高度，所以我最外面的 div 的最小高度应该是 100%，除非有其他方法可以解决这个问题。
@hesson 查看我的编辑，试图解释为什么嵌套的 min-height 不是解决问题的合乎逻辑的方法。
完美，正是我需要的！
实际上，将外部高度设置为 100% 确实会导致儿童内容过多而失败。至少，如果它后面有一个外部的兄弟，它将被内部的内容覆盖。 jsfiddle.net/uL34X/1

【解决方案2】：

我可以让它与属性高度一起工作，但不是最小高度。

http://jsfiddle.net/zDVqm/

【讨论】：