废话不说直接上代码（没有测试兼容性）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>div始终在页面底部</title>
<style type="text/css">
p,.bottom {
margin: 0;
padding: 0;
text-align: center;
font-size: 36px;
color: #fff;
line-height: 80px;
}
html,body {
height: 100%;
overflow:hidden;
}
.f-div {
min-height: 100%;
position: relative;
box-sizing: border-box;
}
.f-over {
height: 100%;
position: relative;
overflow-y: auto;
overflow-x: hidden;
}
p {
height: 300px;
background-color: silver;
}
.bottom {
position: absolute;
left: 0;
right: 0;
bottom: 10px;
background-color: chocolate;
height: 80px;
display: block;
}
</style>
</head>
<body>
<div class="f-over">
<div class="f-div">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<div class="bottom">底部</div>
</div>
<div>
</body>
</html>
注解：最外层的div设置滚动条，内层div设置box-sizing: border-box;，始终保持在底部的div放在内层div中
![龙珠训练营task04[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)