在写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时，假如内容超出视口高度，可能会导致滚动条出现，影响页面的布局和用户体验。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
