<div class="fullscreen-div">
<!-- 内容 -->
</div>
.fullscreen-div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100vw; /* 视窗宽度 */
height: 100vh; /* 视窗高度 */
}
position: absolute;
使得div
脱离常规的文档流,并且相对于视口进行定位。top, right, bottom, left
设置为0,意味着div
的边缘会贴紧视口的边缘。
这样设置后,div
将会覆盖整个浏览器窗口,实现铺满屏幕的效果。