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

相关推荐
你的人类朋友4 分钟前
说说git的变基
前端·git·后端
姑苏洛言7 分钟前
网页作品惊艳亮相!这个浪浪山小妖怪网站太治愈了!
前端
字节逆旅13 分钟前
nvm 安装pnpm的异常解决
前端·npm
Jerry29 分钟前
Compose 从 View 系统迁移
前端
GIS之路1 小时前
2025年 两院院士 增选有效候选人名单公布
前端
四岁半儿1 小时前
vue,H5车牌弹框定制键盘包括新能源车牌
前端·vue.js
烛阴1 小时前
告别繁琐的类型注解:TypeScript 类型推断完全指南
前端·javascript·typescript
gnip1 小时前
工程项目中.env 文件原理
前端·javascript
JefferyXZF2 小时前
Next.js Server Actions 详解: 无缝衔接前后端的革命性技术(八)
前端·全栈·next.js
芜青3 小时前
HTML+CSS:浮动详解
前端·css·html