DIV 始终位于文档底部
- 设置
body
为绝对定位,最小显示高度为:100%
,宽度为:100%
;
- 设置
底部显示块
为绝对定位,bottom: 0
,是body
元素的最后一个直接子元素;
- 设置
底部块元素同级元素
的上一个兄弟元素
的边距
可以包含下底部元素即可;
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.slibing-div{
border: 2px red solid;
height: 200px;
}
.footer{
border: 2px blue solid;
}
</style>
</head>
<body style="min-height: 100%; 100%; position: absolute;">
<div style="margin-bottom: 100px;" class="slibing-div">
<div style="text-align: center">测试用例</div>
</div>
<div style="position: absolute; bottom: 0; 100%; height: 100px;" class="footer">
底部块
</div>
</body>
</html>