在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%;,前提是父元素具有明确定义的高度。

相关推荐
庸俗今天不摸鱼12 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下19 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox29 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞32 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行32 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_5937581033 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周36 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码2 小时前
Spring Task 定时任务
java·前端·spring