html - 嵌套 DIV 最小高度 100%

Question

我有一个嵌套的 DIV，它的最小高度需要为 100%。

Fiddle

<div id="main">
    <div id="nested">
        Content
    </div>
</div>

CSS:

body, html {
    width: 100%;
    height: 100%;
}

#main, #nested {
    position: relative;
    min-height: 100%;
    height: auto;
}

但是，所述内部 div 不会扩展到 100% 的高度。

我意识到这个问题已经被问了很多，但所有解决方案都需要在父容器(在本例中为“main”)上设置 height: 100%。如果我这样做，当内容变得太大时，nested div 将溢出其父级(按几次 fiddle 中的“添加 block ”以供引用)。有什么方法可以强制 min-height 不设置父级高度？

澄清一下，我希望我的内容在到达 #main 的边界时不会被截断——#main 应该调整大小以容纳新的内容大小反而。如果可能的话，我也希望它可以工作 < ie9。

Answer 1

如果你想在 ie9+ 浏览器上工作，你可以像下面这样使用

*{box-sizing:border-box;}
#nested{min-height: calc(100%-30);} // height of text