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

相关推荐
YH丶浩几秒前
vue自定义数字滚动插件
开发语言·前端·javascript·vue
阿民_armin1 分钟前
Canvas 冷暖色分析工具
前端·javascript·vue.js
小岛前端2 分钟前
大小仅 1KB!超级好用!计算无敌!
前端·javascript·开源
没有鸡汤吃不下饭14 分钟前
Git将某个分支合并到开发(dev)、测试(test)后突然想撤销该分支的功能,怎么处理?
前端·git·github
文心快码BaiduComate15 分钟前
Comate分饰多角:全栈开发一个Python学习网站
前端·后端·python
90后的晨仔22 分钟前
Vue 插槽(Slots)全面解析与实战指南
前端·vue.js
我是日安25 分钟前
从零到一打造 Vue3 响应式系统 Day 20 - Reactive:reactive 极端案例
前端·vue.js
Slice_cy26 分钟前
📚 uniapp版本懒加载 + 不定高虚拟列表实现
前端
golang学习记27 分钟前
从0死磕全栈之Next.js API 路由实战:不用后端,前端也能写接口!
前端
Nathan2024061630 分钟前
Kotlin-Sealed与Open的使用
android·前端·面试