让底部始终在浏览器底部

当内容不足够高时，使footer始终处于底部，其中一种方法

html代码

<div class="wrapper">
    <div class="content">
        content
    </div>
    <div class="push"></div>
</div>
<footer class="footer"></footer>

css样式

html,body{ height: 100%; margin: 0; }
.wrapper{
    min-height: 100%;
    margin-bottom: -50px;
}
.footer,.push{ height: 50px; }
.footer{ background: green; }

 

这个代码需要一个额外的元素.push等于底部的高度，来防止内容覆盖到底部的元素。这个push元素是智能的，它并没有占用到底部的利用，而是通过全局加了一个负边距来填充。