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

Question

我之前试过问这个问题，但从反对票和尖酸刻薄的评论来看，我的问题不够清楚。所以我会再拍一次。有图片之类的东西。

我有一个包含 4 个主要元素的简单页面:页眉、页脚和中间部分，全部包含在一个包装器中。包装应至少为屏幕高度的 100%。页脚是粘性的 - 永久粘在 wrapper 的底部。 header 始终位于同一位置。

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

这是我的问题的一个例子:

和jsfiddle .

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

编辑:

插图中显示的绿色是中间的 div，而不是显示出来的 wrapper 。 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;
}

Demo

如果你不想有一个语义上不正确的 #push 元素，你可以使用 :after (见 http://css-tricks.com/snippets/css/sticky-footer/ )，但不会工作旧浏览器。

---

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

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% 触发 hasLayout ，然后 #middle 清除 float #header(参见 How to stop IE7 clearing floats because of hasLayout)。