📅 最后修改于: 2023-12-03 15:39:21.739000 🧑 作者: Mango
在前端开发中，屏幕高度 100% 是一个经常使用的 CSS 技巧。它可以让元素的高度始终占满整个屏幕，无论用户使用的是什么设备。
html, body {
height: 100%;
margin: 0;
}
通过设置 html 和 body 的高度为 100%，便可以实现元素高度为屏幕高度的最简单方式。
这种技巧经常用于创建全屏背景或者分页布局。以下是一个基于屏幕高度 100% 实现的全屏背景的例子：
html, body {
height: 100%;
margin: 0;
}
.bg {
background-image: url('background.jpg');
background-size: cover;
height: 100%;
}
<body>
<div class="bg"></div>
</body>
这段代码会让 div 元素占满整个屏幕，并展示一个全屏背景。
height: 100vh; 来保证元素高度与实际屏幕高度一致。