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

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

一、引言

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

二、高度设置的区别

1、100%

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

1.1、父元素高度固定

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

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

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

1.2、父元素高度未定义

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

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

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

2、100vh

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

2.1、视口高度

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

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

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

2.2、不受父元素限制

即使父元素的高度被限制，使用 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 则与视口的高度相关。在设计响应式布局时，合理使用这两种单位可以提高页面的灵活性和用户体验。

---

版权声明：本博客内容为原创，转载请保留原文链接及作者信息。

参考文章：

• CSS中height:100vh和height:100%的区别_CSDN博客
• 前端设置宽高时height： 100% 和 100vh 的区别 - 艺术诗人