解读 CSS 中 height:100vh 和 height:100% 的区别，为你扫清网页布局难题

CSS 中 height:100vh 与 height:100% 的区别

在网页布局中，控制元素高度的 CSS 属性是至关重要的。height:100vh 和 height:100% 虽然看似相似，但它们有着截然不同的含义，了解它们之间的区别至关重要。

height:100vh

height:100vh 根据屏幕视口的高度来设置元素的高度，与实际内容无关。无论页面滚动到什么位置，元素的高度始终等于视口高度。

html, body {
  height: 100vh;
}

此代码将使整个页面占据整个屏幕的高度，从顶部到浏览器窗口的底部。

height:100%

height:100% 相对于其父元素的高度来设置元素的高度。父元素的高度决定了元素的高度。如果父元素的高度发生变化，元素的高度也会相应变化。

.container {
  height: 100%;
}

如果父元素的高度为 500px，那么元素的高度也将为 500px。如果父元素的高度变为 1000px，元素的高度也会变为 1000px。

选择哪一个？

根据布局需求选择使用 height:100vh 或 height:100% 。

• 使用 height:100vh 用于需要占据整个屏幕高度的元素，例如全屏背景图片或全屏视频。
• 使用 height:100% 用于需要随着父元素高度变化而变化的元素，例如侧边栏或页脚。

实例

为了更好地理解这两个属性的区别，让我们举个例子。假设有两个 div 元素，div1 和 div2，它们的父元素是 div3。

<div id="div1"></div>
<div id="div2"></div>

#div1 {
  height: 100vh;
}

#div2 {
  height: 100%;
}

当 div3 的高度为 500px 时，div1 和 div2 的高度都为 500px。但是，如果 div3 的高度变为 1000px，div1 的高度仍然为 100vh（即 1000px），而 div2 的高度变为 100%（即 1000px）。

结论

掌握 height:100vh 和 height:100% 的区别将使你在网页布局中得心应手。从全屏背景到自适应侧边栏，熟练运用这两个属性将解锁无限的布局可能性。

常见问题解答

1. height:100vh 会受滚动条影响吗？

   • 否，height:100vh 与页面滚动无关。元素的高度始终等于屏幕视口的高度。

2. height:100% 的父元素可以是任何元素吗？

   • 是的，height:100% 的父元素可以是 HTML 中的任何块级元素，例如 div、section 或 article。

3. 我可以同时使用 height:100vh 和 height:100% 吗？

   • 不建议同时使用这两个属性，因为它们可能产生意想不到的结果。

4. 有没有其他方法可以控制元素的高度？

   • 除了 height:100vh 和 height:100%，还可以在 CSS 中使用其他属性来控制元素的高度，例如 px、em 和 rem。

5. 在响应式设计中如何使用 height:100vh 和 height:100%？

   • 在响应式设计中，需要考虑元素在不同屏幕尺寸上的高度。使用媒体查询可以针对不同的设备和屏幕尺寸定义不同的高度值。