网页模板，如果有1行减页脚，内容占据视口的全高度 [英] webpage template where content takes full height of viewport if has 1 line minus footer
问题描述
我正在寻找一个基于css的网页模板，其中主要内容div的视图端口（减页眉和页脚高度）的完整高度，当其内容有几行。页脚应该在视图端口的底部（而不是在内容的正下方，而不是在视口的中间显示）。内容区域需要垂直延伸以与页脚顶部齐平。案例＃1
I am looking for a css based web page template where the main content div takes full height of the view port (minus header and footer heights) when its content has few lines. Footer should be at the bottom of the view port (instead of right below content and instead of showing in middle of viewport). Content area needs to extent vertically to flush with top of footer. Case #1
在所有其他情况下，内容需要超过视口面积，则页脚可以位于网页底部（而不是视口底部）标准网络设计。
In all other cases where the content requires more than viewport area, then footer can be at the bottom of the web page (instead of bottom of viewport) as standard web design.
指向特定链接或示例代码的链接。不要提及模板网站，并告诉我做一个搜索。必须至少在IE 6和FF中工作。如果需要Javascript，只要浏览器不支持JS，它就没问题，它默认将页脚放在内容区域的底部而不破坏布局。
A link to a specific link or sample code appreciated. Don't mention a templates 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| |
| viewport
| |
| |
-------------| |
footer area | |
-------------- <-----
all other cases:
-------------- <-----
header area | |
-------------| |
big content | |
| viewport
| |
| |
| |
| |
| <----
|
-------------|
footer area |
--------------
推荐答案
示例：
http：//www.rossdmartin。 com / aitp / index.htm
更深入的资源：
- http://www.themaninblue.com/experiment/footerStickAlt/
- http://ryanfait.com/sticky-footer/
这篇关于网页模板，如果有1行减页脚，内容占据视口的全高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
