在css中 height: 100vh；与height: 100%；有什么区别？

height: 100%; 与 height: 100vh; 在 CSS 中有着不同的含义和应用场景。

• height: 100%; 表示元素的高度将与其父元素的高度相同。但是，要使 height: 100%; 生效，父元素必须具有明确定义的高度，例如固定高度值或相对定位。如果父元素的高度未被明确定义，那么 height: 100%; 将不会生效。

• height: 100vh; 表示元素的高度将占据视口（浏览器窗口）的高度。无论父元素的高度如何，使用 height: 100vh; 将使元素占据整个视口的高度，这对于实现全屏或类似效果非常有用。

因此，主要区别在于 height: 100%; 是相对于父元素的高度，而 height: 100vh; 是相对于视口的高度。

在实际应用中，如果您想让一个元素占据整个视口的高度，可以使用 height: 100vh;；如果想让一个元素与其父元素等高，可以使用 height: 100%;，前提是父元素具有明确定义的高度。