Question

我试图抓住菜单下方的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。

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/

Answer 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;
}

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

2 个答案: