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

相关推荐
Mintopia13 分钟前
🚀 Next.js 全栈 Web Vitals 监测与 Lighthouse 分析
前端·javascript·全栈
Mintopia15 分钟前
🤖 AIGC + CMS:内容管理系统智能化的核心技术支撑
前端·javascript·aigc
HelloGitHub18 分钟前
这款开源调研系统越来越“懂事”了
前端·开源·github
whysqwhw21 分钟前
hippy的主要原理
前端
子兮曰24 分钟前
🚀95%的前端开发者都踩过坑:JavaScript循环全解析,从基础到高阶异步迭代
前端·javascript·性能优化
2401_8534068824 分钟前
Tdesign-React 组件 Card 实现头部固定,内容区单独可滚动
前端·react.js·tdesign
蓝倾97627 分钟前
小红书获取用户作品列表API接口操作指南
java·服务器·前端·python·电商开放平台·开放api接口
小桥风满袖28 分钟前
极简三分钟ES6 - 数值的扩展
前端·javascript
北辰alk28 分钟前
React 组件间数据共享全方位指南:从 Props 到状态管理
前端
薛定谔的算法28 分钟前
手写React:从Dideact理解前端框架的核心原理
前端·react.js·架构