css 100vh

作者：尒忸旳迣鎅゛沬卜鋽旳凄涼发布日期:2026-03-19 浏览:44

/* 使用 100vh 设置元素高度为视口高度的 100% */
html, body {
  margin: 0;
  padding: 0;
  height: 100vh; /* 设置 html 和 body 的高度为视口高度的 100% */
}

.full-height {
  height: 100vh; /* 设置 .full-height 类的元素高度为视口高度的 100% */
  background-color: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

解释说明：

100vh 表示视口高度的 100%，即浏览器窗口的高度。
在上面的代码中，html 和 body 的高度被设置为 100vh，确保它们占满整个视口高度。
.full-height 类的元素也会占据整个视口的高度，并且通过 flexbox 居中对齐内容，方便展示或布局。

上一篇：css多余文字显示省略号

下一篇：css grid generator