CSS：将内容 div 拉伸到页脚 div 并水平对齐答案

【问题标题】：CSS: Stretch content div to footer div and align horizontallyCSS：将内容 div 拉伸到页脚 div 并水平对齐
【发布时间】：2014-04-29 21:58:46
【问题描述】：

我正在尝试获取位于菜单下方的 div，将其拉伸直到到达页脚（以防内容不足），然后将其居中。我可以使用绝对定位拉伸它，但它不会居中；我可以把它居中，但它不会伸展。代码如下所示：

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 拉伸到底部的答案，但仅此而已。除非绝对需要，否则我不想使用 JavaScript/JQuery。

【问题讨论】：

标签： html css alignment

【解决方案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/

【讨论】：

除了 CSS3 之外，我不打算使用任何东西。而且我知道我的内容可能会填满屏幕，但在极少数情况下不会，我想做好准备。至于您的建议，只要我不在内容更多的页面上向下滚动，它就可以工作。
另外，如果我绝对需要，我不介意使用 JavaScript/JQuery。我只是更喜欢 CSS 解决方案。

【解决方案2】：

你可以试试这个fiddle。我在这里找到了 - CSS Layout Help - Stretch div to bottom of page

#wrap { min-height: 100%;background-color:gray;}
#main {
    overflow: auto;
    padding-bottom: 53px; /* must be same height as the footer */
    background-color: red;
    height: 90%
}
#footer {
    position: relative;
    margin-top: -53px; /* negative value of footer height */
    height: 33px;
    line-height: 33px;
    border-bottom:20px solid #fff;
    text-align: center;
    background-color:blue;
}

【讨论】：