Question

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

<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％的高度。

我意识到这个问题已经被问了很多，但是所有解决方案都需要在父容器上设置height: 100%（在这种情况下，主要＆＃39;）。如果我执行此操作，当内容过大时，nested div会溢出其父级（按下“小块”中的“添加块”＃39;以供参考）。有没有办法强制min-height 没有设置父高？

为了澄清，我希望我的内容在达到#main的范围时不会被切断 - #main应调整大小以保留新的内容大小。我也希望这个工作＆lt; ie9如果可能的话。

Answer 1

如果您想使用浏览器ie9 +而不是使用下面的内容

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

Answer 2

根据你当前的小提琴，内部div会因为主要的＆＃39;而溢出。您在小提琴中的文字（如果您将#content和#main设置为每个高度为100％）。为了避免内容泄漏，并保持“主要内容”。如果您需要文字，可以在overflow: hidden上使用#main，并将div的高度设置为100％ - 以此方式解决您的问题。

Fiddle

#main {
    position: relative;
    min-height: 100%;
    height: 100%;
    background: red;
    padding: 20px;
    overflow: hidden;
}

#nested {
    position: relative;
    min-height: 100%;
    height: 100%;
    width: 60%;
    background: green;
    padding: 10px;
}

希望有所帮助。

嵌套DIV最小高度100％

2 个答案: