css vh单位和百分比的区别

作者：掌心余温发布日期:2026-07-25 浏览:27

/* 使用 vh 单位 */
.container {
  height: 100vh; /* vh 表示视口高度的百分比，1vh 等于视口高度的 1% */
}

/* 使用百分比 */
.inner {
  height: 100%; /* 百分比是相对于父元素的高度，如果没有指定父元素的高度，则会根据内容撑开 */
}

解释说明：

vh 单位：vh 是视口高度的百分比单位。1vh 等于视口高度的 1%。因此，100vh 表示元素的高度等于整个视口的高度，与父元素无关。
百分比：百分比单位是相对于父元素的高度来计算的。如果父元素没有明确的高度，子元素的百分比高度将不会生效，通常会根据内容自动调整。

如果你需要进一步了解，请告诉我！

上一篇：css按钮

下一篇：css修改placeholder颜色