CSS设置元素的高宽为屏幕页面的高宽

作者：System 时间：2024年08月15日分类：所有,css3 字数：314

要使用CSS设置一个元素的宽度和高度为屏幕页面的高度和宽度，可以使用vw（视口宽度单位）和vh（视口高度单位）。以下是一个简单的例子：




/* 设置元素宽度为100%的视口宽度，高度为100%的视口高度 */
.full-screen {
  width: 100vw;
  height: 100vh;
}

在HTML中使用这个类：




<div class="full-screen">
  这个元素的宽度和高度会匹配屏幕的宽度和高度。
</div>

这样.full-screen类的元素就会占据整个视口的宽度和高度。