日期:2011-05-29 23:05:00 来源:本站整理
CSS:让页底内容永久固定在底部[网站美工]
本文“CSS:让页底内容永久固定在底部[网站美工]”是由七道奇为您精心收集,来源于网络转载,文章版权归文章作者所有,本站不对其观点以及内容做任何评价,请读者自行判断,以下是其具体内容:
我们在计划一些页面内容甚少的网页时(典型利用就是登陆页面),由于显示器的辨别率大,在正常情形下,假定页面内容高度小于浏览器高度时,页面底部以下会留下很大的空间.
本文供应了一个CSS办理筹划.
XHTML
- <div id="wrap">
- <div id="main">
- 主体
- </div>
- </div>
- <div id="footer">
- 这里是页底footer内容
- </div>
CSS
- <style type="text/css">
- * {margin:0;padding:0;}
- html, body {height: 100%;}
- #wrap {min-height: 100%;}
- #main {overflow:auto;
- padding-bottom: 60px;} /* 必须利用和footer相同的高度 */
- #footer {position: relative;
- margin-top: -60px;
- height: 60px;
- clear:both;
- background:#369}
- /*Opera Fix*/
- body:before {
- content:"";
- height:100%;
- float:left;
- width:0;
- margin-top:-32767px;
- }
- </style>
注意,以上代码在IE6上根本不起作用,必须利用以下代码来办理IE6下的BUG.
- <!--[if !IE 7]>
- <style type="text/css">
- #wrap {display:table;height:100%}
- </style>
- <![endif]-->
以上是“CSS:让页底内容永久固定在底部[网站美工]”的内容,如果你对以上该文章内容感兴趣,你可以看看七道奇为您推荐以下文章:
本文地址: | 与您的QQ/BBS好友分享! |
评论内容只代表网友观点,与本站立场无关!
评论摘要(共 0 条,得分 0 分,平均 0 分)
查看完整评论