有时候我们的需求是，当页面内容高于可视高度时，footer跟在内容最后，下拉滚动条才会显示。当页面内容少于一页，footer显示在最底部，而不是跟着内容显示到页面中间或其他位置。
实现几个步骤即可： 1.将html，body，content的高度设置为100%。 2.给footer设置一个确定的高度，比如50px。
3.给main设置一个padding-bottom，高度大于等于50px，防止main内容被footer覆盖。 4. 将footer的margin-top设为-50px，移动到可视区域内。 5. 根据需求做简单的调整即可。
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.content {
min-height: 100%;
background: rgb(107, 238, 255);
overflow: hidden;
}
.main {
padding-bottom: 50px;
}
.footer {
height: 50px;
line-height: 50px;
background: rgb(15, 112, 202);
margin-top: -50px;
}
</style>
</head>
<body>
<div class="content">
<div class="main">main</div>
</div>
<div class="footer">
footer
</div>
</body>
<html>
