网页模板，其中如果内容包含1行减去页脚，则内容占据视口的全部高度 [英] Web-page template where content takes full height of view-port if has 1 line minus footer
问题描述
我正在寻找一个基于CSS的网页模板，其中主要内容 div 占内容时视口的整个高度（减去页眉和页脚的高度）有几行。页脚应位于视口的底部，而不是内容的正下方，而应位于视口的中间。内容区域需要垂直扩展才能与页脚顶部相连。
I am looking for a CSS-based web page template where the main content div occupies the full height of the view port (minus header and footer heights) when its content has few lines. The footer should be at the bottom of the viewport, rather than right below content, where it's more in the middle of the viewport. Content area needs to expand vertically to be joined with the top of footer.
如果内容所需的空间比视口还大，则页脚可以位于网络底部页面（而不是视口底部）作为标准网页设计。
If the content requires more space than the viewport, then footer can be at the bottom of the web page (instead of the bottom of view-port) as standard web design.
赞赏指向特定链接或示例代码的链接。不要提及模板网站，并告诉我在其中进行搜索。必须至少在IE 6和FF中工作。如果需要JavaScript，只要浏览器不支持JS就可以，它默认将页脚放在内容区域的底部而不破坏布局。
A link to a specific link or sample code appreciated. Don't mention a template site and tell me to do a search there. Must work at least in IE 6 and FF. If JavaScript is required, it's OK as long as if browser doesn't support JS, it defaults to putting the footer at the bottom of the content area without breaking the layout.
案例1的草图：
-------------- <-----
header area | |
-------------| |
small content| |
| view-port
| |
| |
-------------| |
footer area | |
-------------- <-----
all other cases:
-------------- <-----
header area | |
-------------| |
big content | |
| view-port
| |
| |
| |
| |
| <----
|
-------------|
footer area |
--------------
推荐答案
此处的示例：
http：//www.rossdmartin。 com / aitp / index.htm
更多深入的资源：
- http://www.themaninblue.com/experiment/footerStickAlt/
- http://ryanfait.com/sticky-footer/
这篇关于网页模板，其中如果内容包含1行减去页脚，则内容占据视口的全部高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
