手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >footer 贴在底部的布局实现代码
footer 贴在底部的布局实现代码
摘要:footer位置自适应cccsssfffhtml,body,#wrap{height:100%;}body>#wrap{height:aut...

footer位置自适应

<div id="wrap">

<div id="main">

<div id="content">

ccc

</div>

<div id="side">

sss

</div>

</div>

</div>

<div id="footer">

fff

</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;

background: #ddd;

clear: both;}

.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 */

【footer 贴在底部的布局实现代码】相关文章:

IE6定义1px左右高度的容器示例代码

CSS-float的属性

DIV+CSS常用的网页布局代码

在div底部显示背景图片实现代码

CSS 制作的三级菜单特效代码

Iframe高度自适应代码

纯CSS做的带开关的台灯

css中水平垂直居中对齐布局实例总结

css按钮自适应实现原理及代码

兼容好的css透明代码

精品推荐
分类导航