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

相关推荐
泯泷几秒前
「译」解析 JavaScript 中的循环依赖
前端·javascript·架构
抹茶san3 分钟前
前端实战:从 0 开始搭建 pnpm 单一仓库(1)
前端·架构
Senar31 分钟前
Web端选择本地文件的几种方式
前端·javascript·html
烛阴1 小时前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
姑苏洛言1 小时前
扫码小程序实现仓库进销存管理中遇到的问题 setStorageSync 存储大小限制错误解决方案
前端·后端
烛阴1 小时前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_12542 小时前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx2 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
Mikey_n2 小时前
前台调用接口的方式及速率对比
前端
周之鸥2 小时前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron