如何让Footer无论页面长短都在最底部, 并和正文保持固定高度？

html结构:

1. <div id="container">
2. <div id="content">页面正文</div>
3. </div>
4. <div class="footer"></div>

 

CSS样式:

 

1. html, body{
2. height:100%;
3. }
4. #container {
5. min-height:100%; /*使内容高度和body一样*/
6. margin-bottom:-80px;/*向上缩减80像素，不至于footer超出屏幕可视范围*/
7. }
8. #content {
9. padding-bottom:150px; /*这个是关键，处理页面高度超出屏幕可视范围时，控制内容和底部高度之间距离*/
10. }
11. .footer {
12. height:80px;
13. }