footer置底

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%,否则将无法随滚动条的滚动而滚动.

posted @ 2016-05-12 18:16  青丝锁刘peng  阅读(443)  评论(0编辑  收藏  举报