无论页面内容多长，footer始终在页面底部

html

<body>
    <div class="content">
        <div class="header"></div>
        <div class="main-content"></div>
        <div class="footer"></div>
    </div>
</body>

css


html,
body {
height: 100%; /*必要条件*/
}
.content {
min-height: 100%; /*必要条件*/
position: relative; /*必要条件*/
}
.header {
height: 100px;
background-color: #000;
}
.main-content {
padding-bottom: 200px; /*此处务必要大于等于footer的高度*/
background-color: #333;
}
.footer {
position: absolute; /*必要条件*/
bottom: 0; /*必要条件*/
width: 100%;
height: 200px;
background-color: #232323;
}