css - 导致DIV填满页面？

Question

我见过一些这样的问题，但它们已经过时了，而且没有一个解决方案对我有用...

我有一个简单的html

<div id='outer'>
    <div id='nav'></div>
    <div id='content'>
    <!-- html -->
    </div>
    <div id='footer'></div>
</div>

和我的CSS

#outer {width: 800px; margin: 30px auto;}
#nav {height: 40px; width: 800px;}
#content {width: 800px;}
#footer {height: 40px; width: 800px;}

内容似乎可以选择自己的高度，并且无论其中包含什么都保持该高度。我怎样才能让它 (#content) 填充其内容的空间？

Answer 1

#content 默认设置为 height:auto，它根据内容设置高度。如果您要求页脚即使没有足够的内容填满屏幕也将保留在屏幕底部，那么您需要使用某种“粘性页脚”。

Ryan Fait's sticky footer是我用过的最好的。