在css中 height: 100vh;与height: 100%;有什么区别?

height: 100%;height: 100vh; 在 CSS 中有着不同的含义和应用场景。

  • height: 100%; 表示元素的高度将与其父元素的高度相同。但是,要使 height: 100%; 生效,父元素必须具有明确定义的高度,例如固定高度值或相对定位。如果父元素的高度未被明确定义,那么 height: 100%; 将不会生效。

  • height: 100vh; 表示元素的高度将占据视口(浏览器窗口)的高度。无论父元素的高度如何,使用 height: 100vh; 将使元素占据整个视口的高度,这对于实现全屏或类似效果非常有用。

因此,主要区别在于 height: 100%; 是相对于父元素的高度,而 height: 100vh; 是相对于视口的高度。

在实际应用中,如果您想让一个元素占据整个视口的高度,可以使用 height: 100vh;;如果想让一个元素与其父元素等高,可以使用 height: 100%;,前提是父元素具有明确定义的高度。

相关推荐
brzhang2 分钟前
代码即图表:dbdiagram.io让数据库建模变得简单高效
前端·后端·架构
三巧13 分钟前
纯CSS吃豆人(JS仅控制进度)
javascript·css·html
SummerGao.14 分钟前
【解决】layui layer的提示框,弹出框一闪而过的问题
前端·layui
软件技术NINI30 分钟前
html css js网页制作成品——HTML+CSS+js美甲店网页设计(5页)附源码
javascript·css·html
天天扭码42 分钟前
从数组到对象:JavaScript 遍历语法全解析(ES5 到 ES6 + 超详细指南)
前端·javascript·面试
拉不动的猪43 分钟前
前端开发中常见的数据结构优化问题
前端·javascript·面试
街尾杂货店&44 分钟前
css word
前端·css
Мартин.1 小时前
[Meachines] [Hard] CrimeStoppers LFI+ZIP-Shell+Firefox-Dec+DLINK+rootme-0.5
前端·firefox
冰镇生鲜1 小时前
快速静态界面 MDC规则约束 示范
前端
技术与健康1 小时前
【解读】Chrome 浏览器实验性功能全景
前端·chrome