CSS中height设置100vh和100%的区别

最新推荐文章于 2025-03-20 10:14:08 发布

eqa11

最新推荐文章于 2025-03-20 10:14:08 发布

阅读量1.8k

点赞数 27

文章标签： css 前端

本文链接：https://blog.csdn.net/NiNg_1_234/article/details/142673511

版权

在前端开发中，我们经常需要设置元素的高度。CSS 提供了多种方式来定义元素的高度，其中 height: 100%; 和 height: 100vh; 是两种常见的设置方式。它们之间有着明显的区别，了解这些区别对于创建响应式布局和实现特定的视觉效果至关重要。

height: 100%; 表示元素的高度是其包含块（父元素）的高度的 100%。这里的关键是“包含块”，它可能是父元素，也可能是最近的非静态定位的祖先元素。

当父元素的高度被明确设置时，子元素使用 height: 100%; 将会完全填充父元素的高度。

<div style="height: 300px; background-color: yellow;">
  <div style="height: 100%; background-color: blue;"></div>
</div>

在这个例子中，内部的 <div> 将会完全填充外部 <div> 的高度。

如果父元素的高度没有被定义，那么子元素即使设置了 height: 100%; 也不会显示任何高度，因为百分比是基于父元素的高度来计算的。

<div style="background-color: yellow;">
  <div style="height: 100%; background-color: blue;"></div>
</div>

这种情况下，内部的 <div> 高度将会是 0。

height: 100vh; 表示元素的高度是视口（viewport）高度的 100%。vh 是 viewport height 的缩写，其中 1vh 等于视口高度的 1%。

无论父元素的高度如何，使用 height: 100vh; 的元素都会扩展到与视口相同的高度。

<div style="height: 100vh; background-color: blue;"></div>

这个 <div> 将会覆盖整个视口的高度，无视其父元素的高度。

即使父元素的高度被限制，使用 height: 100vh; 的子元素也会扩展到视口的高度。

<div style="height: 200px; background-color: yellow;">
  <div style="height: 100vh; background-color: blue;"></div>
</div>

在这个例子中，内部的 <div> 高度将会与视口一致，不受外部 <div> 的限制。

height: 100%; 和 height: 100vh; 在 CSS 中提供了不同的高度设置方式。100% 依赖于父元素的高度，而 100vh 则与视口的高度相关。在设计响应式布局时，合理使用这两种单位可以提高页面的灵活性和用户体验。

参考文章：