html - CSS:将内容 div 拉伸(stretch)到页脚 div 并水平对齐

Question

我正在尝试获取位于菜单下方的 div，将其拉伸(stretch)直到到达页脚(以防内容不足)，然后将其居中。我可以使用绝对定位来拉伸(stretch)它，但它不会居中；我可以将它居中，但它不会拉伸(stretch)。代码看起来像这样:

HTML

<div id="container">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#container {
    min-height: 100%;
    position: relative;
}

#header {
    background: #111;
    width: 500px;
    height: 125px;
    margin: auto;
}

#content {
    width: 500px;
    height: 100%;
    background: #666;
}

#footer {
    position: absolute;
    bottom: 0;
    background: #111;
    width: 100%;
}

这是我在 Inkscape 中创建的图像示例:http://www.tiikoni.com/tis/view/?id=46baeba

我可以找到有关如何将内容 div 拉伸(stretch)到底部的答案，但仅此而已。除非我绝对需要，否则我不想使用 JavaScript/JQuery。

Answer 1

如果您打算按照自己的方式做事(将页脚设置为 position: absolute; bottom: 0;)，您可以:

#footer {
    position: absolute;
    bottom: 0;
    background: #111;
    width: 100%;
    height: 50px; // or whatever height you want
}
#content {
    width: 500px;
    background: #666;
    margin: 0px auto;
    position: absolute;
    top: 125px; // same height as header
    bottom: 50px; // same height as footer
    left: 0;
    right: 0;
    margin: auto;
}

JSFiddle:http://jsfiddle.net/g2y9Y/

但我认为对于您要实现的目标，设置绝对定位可能不是一个好主意。您确定您的内容永远不会超过用户浏览器高度的 100% 吗？为什么不简单地在内容上设置一个 min-height 呢？像这样:http://jsfiddle.net/g2y9Y/1/