<html>
<head></head>
<body>
<div class="page-wrapper">
<div class="page-content">内容部分</div>
</div>
<footer class="footer">这里是页面底部</footer>
</body>
</html>//css
html, body{
height: %;
}
footer{
height: 50px;
line-height: 50px;
background-color: #62f1c3;
text-align: center;
}
1、position: fixed
//css
.page-wrapper{
padding-bottom: 50px;
}
.footer{
position: fixed;
width: 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(% - 50px);
overflow-y: auto;
}
5、使用flex-box布局
body{
display: flex;
flex-direction: column;
}.page-wrapper{
flex: auto;
overflow-y: auto;
}
.footer{
flex: auto;
}
