栏目导航
热点推荐
- 3个简单却重要的CSS技巧
- css基础:熟悉了解盒子模型(box m
- CSS Hack兼容各浏览器是否正常
- 最常用的12种CSS BUG解决方法与
- [分享]我的css hack观点
- CSS实例教程:分号引起页面混乱
- CSS教程:认真学习haslayout
- CSS教程:编写CSS代码时样式命名
- 如何在CSS中设定文本的尺寸
- CSS教程:CSS定位属性
- 新窗口打开超链接的正确方法
- 轻松搞定IE的CSS制作网页技巧3则
阅览排行
CSS实例教程:永远在网页底部的网页布局
www.jz123.cn 2009-07-07 来源: 中国建站 责任编辑(袁袁) 我要投递新闻
看这个网页的底部,为什么会跑到那儿去呢?即使内容很少的情况下,它也始终在页面的底部。
否则页面底部将留下大量空白。
下面是它实现的代码:
<div id="wrap"> <div id="main" class="clearfix"> <div id="content"> </div> <div id="side"> </div> </div> </div> <div id="footer"> </div> html, body, #wrap {height: 100%;} body > #wrap {height: auto; min-height: 100%;} #main {padding-bottom: 150px;} /* 必须使用和footer相同的高度 */ #footer {position: relative; margin-top: -150px; /* footer高度的负值 */ height: 150px; clear:both;} 兼容性Hack: .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac */ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ |
0
上一篇:直接将HTML页面打印页面的设计 下一篇:10个最常用的CSS className