3

这是我现在正在处理的页面：http: //jsfiddle.net/0xsven/hycRx/

我希望页面垂直扩展以填满整个屏幕，以便页脚始终位于最底部。我不是在寻找粘性页脚！我希望页面像这张图片一样扩展到底部。

知道这是否可能吗？

更新

我使用了一些令人困惑的词，所以我试图澄清我的问题：

我希望我的页面始终垂直填充视口，即使没有足够的内容。只要有足够的内容来扩展视口，页面就应该是可滚动的。在我的测试中，粘性页脚总是停留在视口底部，覆盖其他元素，这是我不希望发生的。

我想出的一种解决方案是使用 jquery 操作/调整填充/边距，使其适合视口。但我不喜欢在这些事情上使用 javascript。

4

3 回答 3

0

您试图模仿的行为是传统的 CSS Sticky Footer。

这是一个简单的例子：

HTML

<div id="wrap">
    <div id="main">
    </div>
</div>

<div id="footer">
</div>

CSS

html, body {height: 100%;}
#wrap {min-height: 100%; *display:table; *height:100%}
#main {overflow:auto; padding-bottom: 150px;}  /* must be same height as the footer */
#footer {
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;
} 

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}
于 2012-09-11T08:24:17.170 回答
0 
#footer{
    position: fixed;
    bottom: 0;
}
于 2012-09-10T11:40:42.410 回答
0

您可以尝试使用 position 属性，如下所示： 

#footer{
    background-color: #222;
    position: relative;
    bottom: 0;
}
于 2012-09-10T11:20:37.100 回答