手机
当前位置:查字典教程网 >网页设计 > 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 贴在底部的布局实现代码】相关文章:

CSS自动控制图片大小的代码

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

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

CSS浮动布局基础

Iframe高度自适应代码

多步骤进度条的实现原理及代码

页脚始终保持在页面底部的网页布局方法

CSS网页右下角广告的布局实例

CSS多列布局实现方法大全

让网站变灰的css代码

精品推荐
分类导航