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% 的元素,如果父元素有滚动条,子元素的高度也会受到影响。

相关推荐
careybobo1 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)2 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之3 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端3 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡3 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木4 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!5 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷5 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
还是鼠鼠5 小时前
Node.js全局生效的中间件
javascript·vscode·中间件·node.js·json·express
自动花钱机6 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5