CSS布局：垂直扩展页面

Question

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

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

知道这是否可行？

---

更新

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

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

我想出的一个解决方案是使用jquery操作/调整paddings / margin的大小，使其适合视口。但我不喜欢使用javascript来做这些事情。

Answer 1

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

#footer{
    background-color: #222;
    position: relative;
    bottom: 0;
}

Answer 2

嗨，请查看此页面代码我认为这就像你想要的一样

http://bestofdesigns.be/studioregenbogen/index.html

Answer 3

#footer{
    position: fixed;
    bottom: 0;
}

Answer 4

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

Here's a simple example：

<强> 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;/
}