DIV+CSS:页脚永远保持在页面底部

前端设计 更新于 热度(13207)

页脚永远保持在页面底部

  有时候，我们用CSS创建一个高度自适应布局，如何保证页脚（footer）在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事。我看过一些利用绝对定位的例子，但总感觉不是那么完美，经过一下午的研究总结出一个利用负值外补丁的方法来实现这个效果的方法，兼容IE5.0 ，Opera 8.5 ，Firefox 1.5 。下面我们看步骤：

1、为了让浏览器识别高度100%我们需要先给 html 和 body 加上一个高度值，同时清除所有元素的 margin 和 padding。经测试，html和body的 height: 100%; 等于整个浏览器窗口的总高度，无论内容是否超过一屏。而它们下一级子元素 height: 100%; 则等于第一屏的高度。是不是有点不好理解？

css 代码
 
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. html, body {
  6. height: 100%;
  7. }

2、因为上面提到的问题，所以为了让布局自适应高度，我们要加上 min-height: 100%;，虽然IE不支持这个属性但是IE的 height: 100%; 有同样的作用：

css 代码
 
  1. #wrapper {
  2. min-height: 100%;
  3. }
  4. * html #wrapper {
  5. height: 100%;
  6. }

这样，一个最简单的最小高度满一屏的自适应布局就做好了。为了便于查看，我加了一些宽度和背景色修饰，如下：

css 代码
 
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. html, body {
  6. height: 100%;
  7. text-align: center;
  8. font: 12px/1.4 Verdana, sans-serif;
  9. background: #f00;
  10. }
  11. #wrapper {
  12. width: 770px;
  13. min-height: 100%;
  14. background: #ccc;
  15. margin: auto;
  16. text-align: left;
  17. }
  18. * html #wrapper {
  19. height: 100%;
  20. }

下面看完整代码的运行效果：

声明：本站所有文章，如无特殊说明或标注，均为本站YangJunwei原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。本文链接https://yangjunwei.com/139.html

上一篇

下一篇

相关文章