CSS 中高度 100%和高度 100vh 有什么区别
一、含义
1. 高度 100%
表示元素的高度是相对于其父元素的高度而言的。如果父元素没有明确的高度设置，那么子元素设置为 height:100% 将不会有确定的高度值。
2. 高度 100vh
“vh”是 “viewport height” 的缩写，即视口高度。100vh 表示元素的高度等于浏览器视口的高度。
二、使用场景
1. 高度 100%
常用于需要根据父元素动态调整高度的情况，例如在响应式布局中，子元素的高度需要随着父元素的变化而变化。
但需要确保父元素有明确的高度设置，否则 100% 的效果可能不可预期。
2. 高度 100vh
适用于需要占据整个视口高度的场景，比如创建全屏的背景、导航栏或页面的主要内容区域。
不需要考虑父元素的高度，直接与视口高度关联。
三、注意事项
1. 浏览器兼容性
一般来说，“高度 100vh” 在现代浏览器中都有较好的支持，但在一些旧版本的浏览器中可能会有一些细微的差异。
“高度 100%” 的兼容性也较好，但需要注意父元素高度的设置对其的影响。
2. 滚动和内容溢出
当使用 height:100vh 时，如果内容超出视口高度，可能会导致滚动条出现，这可能会影响页面的布局和用户体验。
对于 height:100% 的元素，如果父元素有滚动条，子元素的高度也会受到影响。