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

标签 html css

我正在寻找一个基于 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  |         
--------------   

最佳答案

关于html - 如果有 1 行减去页脚,则内容占据视口(viewport)全高的网页模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/106646/

相关文章:

php - 将 jQuery/AJAX 脚本附加到使用 window.setInterval(, 1000*60) 方法添加的元素

html - CSS 媒体查询不起作用 仅限 iPad 横向

html - css3,不能把一个div集中

javascript - 如何在不使用 ng-repeat Angularjs 的情况下移动下一个和上一个 div?

html - 如何仅在手机上放大页脚?

javascript - 如何更改窗口内内容的大小?

html - 我怎样才能使我的表单响应所有大小

html - 子元素不接受位置命令

html - 如何仅使用 CSS 创建这种复杂的布局?

html - CSS 下拉菜单,将嵌套的 UL 对齐到父 LI 的右边缘