视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
DIV+CSS:页脚永远保持在页面底部_html/css
2020-11-27 16:36:57 责编:小采
文档
点击下载本文 文档为doc格式

页脚永远保持在页面底部

有时候，我们用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. }

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

 
 
 
 
DIV+CSS:页脚永远保持在页面底部 _ 海波吧 _ www.haibor8.cn  
 
 
 
 
 此处显示 "header" 的内容 
 此处显示 "content-box" 的内容 
 此处显示 i"sidebar" 的内容 
 
此处显示 "footer" 的内容

下载本文
显示全文
专题
懂视 51dongshi.net 版权所有
Copyright © 2019-2025