让footer始终位于页面的最底部不随滚动而滚动
作者:admin 日期:2016-10-25
来源：http://www.jb51.net/css/196706.html
html代码：
复制代码
代码如下:<div class="container">
<div cass="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
第一种情况：footer随着滚动条的滚动而滚动
复制代码
代码如下:.container{position:relative;width:100%;min-height:100%;}
.body{padding-bottom:50px;}
.footer{height:50px;position:absolute;bottom:0px;left:0px;}
第二种情况:footer始终在其底部固定
复制代码
代码如下:.container{position:relative;width:100%;min-height:100%;}
.body{padding-bottom:50px;}
.footer{height:50px;position:fixed;bottom:0px;left:0px;}
footer 贴在底部的布局实现代码
作者:admin 日期:2016-10-25
来源：http://www.jb51.net/css/21807.html
footer位置自适应
复制代码
代码如下:<div id="wrap">
<div id="main" class="clearfix">
<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 */
- 1
