html - 如果有 1 行减去页脚，则内容占据视口(viewport)全高的网页模板

Question

我正在寻找一个基于 CSS 的网页模板，其中主要内容 div 在其内容只有几行时占据了视口(viewport)的整个高度(减去页眉和页脚高度)。页脚应该位于视口(viewport)的底部，而不是在内容的正下方，它更多地位于视口(viewport)的中间。内容区域需要垂直扩展才能与页脚顶部连接。

如果内容需要比视口(viewport)更多的空间，那么页脚可以作为标准网页设计位于网页底部(而不是视口(viewport)底部)。

感谢指向特定链接或示例代码的链接。不要提到模板网站，让我在那里搜索。必须至少在 IE 6 和 FF 中工作。如果需要 JavaScript，只要浏览器不支持 JS 就可以，它默认将页脚放在内容区域的底部而不破坏布局。

案例#1 的草图:

--------------   <-----
header area  |         |
-------------|         |
small content|         |   
             |     view-port
             |         |
             |         |
-------------|         |
footer area  |         |
--------------   <-----


all other cases:

--------------   <-----
header area  |         |
-------------|         |
big content  |         |   
             |     view-port
             |         |           
             |         |
             |         |
             |         |
             |    <----      
             |         
-------------|         
footer area  |         
--------------   

Answer 1

这里的例子: http://www.rossdmartin.com/aitp/index.htm

更深入的资源:

• http://www.themaninblue.com/experiment/footerStickAlt/
• http://ryanfait.com/sticky-footer/