CSS中height使用100%和100vh的区别

文章目录

在写CSS的时候,div使用height:100%时,有时无法撑起一个页面,需要使用100vh才可以撑起来,下面是两者的差别:

基准高度的不同

‌height:100vh和height:100%是CSS中设置元素高度的两种不同方式,它们的主要区别在于基准高度的不同。‌‌

height:100%

‌含义‌:height:100%表示元素的高度是其父元素高度的100%。这里的"包含块"可能是父元素,也可能是最近的非静态定位的祖先元素。

‌使用场景‌:常用于需要根据父元素动态调整高度的情况,例如在响应式布局中,子元素的高度需要随着父元素的变化而变化。但需要确保父元素有明确的高度设置,否则height:100%的效果可能不可预期。

‌兼容性和滚动问题‌:在现代浏览器中,height:100%有较好的兼容性,但需要注意父元素高度的设置对其的影响。如果父元素有滚动条,子元素的高度也会受到影响。此外,如果内容超出视口高度,可能会导致滚动条出现,影响页面布局和用户体验。

height:100vh

‌含义‌:height:100vh表示元素的高度是视口(viewport)高度的100%。"vh"是"viewport height"的缩写,即视口高度,1vh等于视口高度的1%。

‌使用场景‌:适用于需要占据整个视口高度的场景,例如创建全屏的背景、导航栏或页面的主要内容区域。这种方法不受父元素影响,可以确保元素始终填满整个视口的高度。

‌兼容性和滚动问题‌:height:100vh在现代浏览器中也有较好的支持,但在一些旧版本浏览器中可能会有细微的差异。使用height:100vh时,如果内容超出视口高度,可能会导致滚动条出现,影响页面的布局和用户体验。

相关推荐
池鱼ipou12 分钟前
面试必看:深入浅出 JavaScript 事件循环与异步编程技巧
前端·javascript·面试
刺客-Andy24 分钟前
开发中常用的设计模式 用法及注意事项
开发语言·前端·javascript·设计模式
uperficialyu37 分钟前
2025年03月18日柯莱特(外包宁德)一面前端面试
前端·面试·职场和发展
MINO吖43 分钟前
vue-cli如何正确关闭prefetchprefetch和preload
前端·javascript·vue.js
男Ren、麦根1 小时前
用 Pinia 点燃 Vue 3 应用:状态管理革新之旅
前端·javascript·vue.js
泷羽Sec-pp1 小时前
WebDeveloper靶机详解
linux·服务器·前端·网络·chrome
肥肥呀呀呀2 小时前
flutter本地运行web端图片跨域解决
前端·flutter
痴心阿文2 小时前
新版 React19使用 react-quill
前端·npm·node.js
月亮慢慢圆2 小时前
事件循环
前端
huangkaihao2 小时前
像讲故事一样的STAR法则:从像素到视口的自适应之旅
前端·面试·程序员