<html>
<head></head>
<body>
<div class="page-wrapper">
<div class="page-content">内容部分</div>
</div>
<footer class="footer">这里是页面底部</footer>
</body>
</html>
//css
html, body{
height: 100%;
}
footer{
height: 50px;
line-height: 50px;
background-color: #62f1c3;
text-align: center;
}
1、position: fixed
//css
.page-wrapper{
padding-bottom: 50px;
}
.footer{
position: fixed;
100%;
bottom: 0;
}
2、footer前的元素使用负margin-bottom
.page-wrapper{
height: 100%;
padding-bottom: 50px;
margin-bottom: -50px;
overflow-y: auto;
}
3、footer元素使用负margin-top
.page-wrapper{
height: 100%;
padding-bottom: 50px; overflow-y: auto; } .footer{ margin-top: -50px; }
4、使用calc()计算内容部分的高度
.page-wrapper{ height: calc(100% - 50px); overflow-y: auto; }
5、使用flex-box布局
body{ display: flex; flex-direction: column; } .page-wrapper{ flex: 1 1 auto;
overflow-y: auto; } .footer{ flex: 0 0 auto; }