html - CSS：与父级相关的非离散最小高度，但也能够扩展父级

Question

我早些时候尝试过问这个问题，但从反对票和尖刻的评论来看，我的问题不够清楚。所以我会再拍一次。有图片和东西。

我有一个包含 4 个主要元素的简单页面：页眉、页脚和中间，都包含在一个包装器中。包装器至少应为屏幕高度的 100%。页脚是粘性的 - 永久卡在包装纸的底部。标题总是在同一个位置。

棘手的部分是中间；我希望它始终跨越页眉和页脚之间的整个空间，但是，如果需要，还可以推动包装器扩展到超出其最小高度。

这是我的问题的说明：

和jsfiddle。

我能想到的唯一方法是使用css calc方法，但它太不可靠了。任何人都可以提出一个更好的方法来实现这一点。

编辑：

插图中显示的绿色是中间的 div，而不是显示的包装器。IE。我特别需要中间 div 始终跨越页眉和页脚之间的完整间隙。

Answer 1

基于http://ryanfait.com/sticky-footer/，您可以使用

HTML：

<div id="wrapper">
    <div id="header">
        Header
    </div>
    <div id="middle">
        Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle
    </div>
    <div id="push"></div>
</div>
<div id="footer">
    Footer
</div>

CSS：

* {
    margin: 0;
}
html, body {
    height: 100%;
}
#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
#footer, #push {
    height: 4em;
}

演示

如果您不想使用语义不正确的#push元素，可以使用:after（参见http://css-tricks.com/snippets/css/sticky-footer/），但不适用于旧浏览器。

---

如果你真的需要中间 div 来填充所有空间，你可以使用浮动元素：

HTML：

<div id="header">
    Header
</div>
<div id="middle">
    Middle begin<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle end
    <div id="push"></div>
</div>
<div id="footer">
    Footer
</div>

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
#header {
    float: left;
    width: 100%;
}
#middle {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
#footer, #push {
    height: 4em;
    clear: both;
}

演示：http: //jsfiddle.net/C43ZJ/2/

请注意，它在 IE7 上不起作用，因为min-height: 100%triggers hasLayout，然后#middle清除浮动#header（请参阅How to stop IE7 clearing floats because of hasLayout）。