CSS---贴在底部的布局.
2009-02-16 15:59
288 查看
CSS 贴在底部的布局, 它始终在页面的底部。 http://www.cssstickyfooter.com
看这个网页的底部,为什么会跑到那儿去呢?即使内容很少的情况下,它也始终在页面的底部。
否则页面底部将留下大量空白。 下面是它实现的代码:
<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 */
看这个网页的底部,为什么会跑到那儿去呢?即使内容很少的情况下,它也始终在页面的底部。
否则页面底部将留下大量空白。 下面是它实现的代码:
<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 */
相关文章推荐
- 纯CSS 贴底部的布局(兼容各个浏览器包括IE6)
- CSS实现自适应高度布局:头部底部固定,中间自适应铺满屏幕剩余高度,中间盒子里左盒子固定右盒子自适应宽度
- 第九十三节,html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计
- css底部不动的布局方法[分享][完美]
- A CSS Sticky Footer——CSS底部固定布局分析
- Div+css布局之<img>和<a>底部对齐
- CSS布局之div交叉排布与底部对齐--flex实现
- 纯CSS 贴底部的布局
- CSS_贴在底部的布局
- CSS 使用Flex布局让元素保持在页面底部
- CSS布局:让页底内容永远固定在底部
- css布局:如何使底部始终在文档末尾
- 【CSS】CSS经典布局之绝对底部布局
- CSS布局:让页脚始终保持底部的方法
- Css布局口诀
- 兼容浏览器的布局CSS心得体会
- CSS中冻结布局
- 认识css布局模式(流动模式下的块状元素和内联元素)
- CSS布局时容易出的小错误,导致浏览器不兼容或者各种不显示
- 详解 CSS 居中布局技巧