CSS中height使用100%和100vh的区别

在写CSS的时候，div使用height:100%时，有时无法撑起一个页面，需要使用100vh才可以撑起来，下面是两者的差别：

基准高度的不同

‌height:100vh和height:100%是CSS中设置元素高度的两种不同方式，它们的主要区别在于基准高度的不同。‌‌

height:100%

‌含义‌：height:100%表示元素的高度是其父元素高度的100%。这里的“包含块”可能是父元素，也可能是最近的非静态定位的祖先元素。
‌使用场景‌：常用于需要根据父元素动态调整高度的情况，例如在响应式布局中，子元素的高度需要随着父元素的变化而变化。但需要确保父元素有明确的高度设置，否则height:100%的效果可能不可预期。
‌兼容性和滚动问题‌：在现代浏览器中，height:100%有较好的兼容性，但需要注意父元素高度的设置对其的影响。如果父元素有滚动条，子元素的高度也会受到影响。此外，如果内容超出视口高度，可能会导致滚动条出现，影响页面布局和用户体验。

height:100vh

‌含义‌：height:100vh表示元素的高度是视口（viewport）高度的100%。“vh”是“viewport height”的缩写，即视口高度，1vh等于视口高度的1%。
‌使用场景‌：适用于需要占据整个视口高度的场景，例如创建全屏的背景、导航栏或页面的主要内容区域。这种方法不受父元素影响，可以确保元素始终填满整个视口的高度。
‌兼容性和滚动问题‌：height:100vh在现代浏览器中也有较好的支持，但在一些旧版本浏览器中可能会有细微的差异。使用height:100vh时，如果内容超出视口高度，可能会导致滚动条出现，影响页面的布局和用户体验。