CSS实现footer一直在页面底部,如果文档不够一页,这footer在底部,否则,footer跟随在文档底部
效果图如下:
HTML代码如下:
<div class="wrapper">
<div class="header">
<h4>Header</h4>
</div>
<div class="container">
<h4>Container</h4>
<p>container</p>
<p>container</p>
<p>container</p>
<p>container</p>
<p>container</p>
<p>container</p>
<p>container</p>
<p>container</p>
<p>container</p>
<p>Last Container</p>
</div>
<div class="footer">
<h4>Footer</h4>
</div>
</div>
CSS代码如下:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.wrapper {
min-height: 100%;
position: relative;
}
.header {
height: 50px;
background: #999;
}
.container {
padding-bottom: 100px;
}
.footer {
background: #999;
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
}