码迷,mamicode.com
首页 > 其他好文 > 详细

footer置底

时间:2016-05-13 11:54:23      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:

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

注意: 
千万不能设置.container的高度为100%,否则将无法随滚动条的滚动而滚动.

footer置底

标签:

原文地址:http://www.cnblogs.com/answer-liu/p/5486838.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!