footer置底

时间:2023-03-09 16:36:33
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%,否则将无法随滚动条的滚动而滚动.