文章目录
在写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时,如果内容超出视口高度,可能会导致滚动条出现,影响页面的布局和用户体验。