关于height:100%和height:100vh的区别

最新推荐文章于 2025-03-20 10:14:08 发布
最新推荐文章于 2025-03-20 10:14:08 发布
阅读量381 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/devincob/article/details/118491795
版权
本文探讨了CSS中 vh 和 % 单位的使用。当元素没有内容时，设置 height: 100vh 会使元素高度与屏幕高度相同，而设置 height: 100% 则可能导致元素高度为0，因为它依赖于父元素的高度。1vh 表示当前视口高度的1%，而100%则是相对于父元素。在涉及窗口嵌套或iframe时，vh相对于当前窗口，这可能引起不同的行为。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1vh当元素没有内容时候，设置height:100vh；该元素会被撑开屏幕高度一致100vh 是相对于 当前的window
1%当元素没有内容时候，设置height:100%；该元素不会被撑开，此时高度为0100% 是相对于父元素

1vh就是当前屏幕可见高度的1%，也就是说:height:100vh == height:100%;
100% 是相对于父元素 100vh 是相对于 当前的window，有可能是ifame 嵌套 会有多个window

devincob
关注
为什么 height:100%会无效？
liuhao9999的博客
03-23 720
对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值。 原因是如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto，因为解释成了auto， 所以无法参与计算。 使用绝对定位的元素会有计算值，即使祖先元素的height计算为auto也是如此。 ...
height auto和height 100%区别
LRQQHM的博客
04-30 446
height:auto是自适应内容的高度 height:100%是相对于最近的父盒子的高度
CSS | CSS中height:100vh和height:100%的区别
热门推荐
青春木鱼的博客
06-15 1万+
1vh它表示的是当前屏幕可见高度的1/100，而1%它表示的是父元素长或者宽的1%
CSS中height使用100%和100vh的区别
最新发布
810cheng
03-20 766
css中height使用100%和100vh的区别
vh/vw和100%的区别
caigua8700的博客
12-04 2700
在实现自适应布局时往往会用到vh/vw和100%，那么vh/vw和100%的区别是什么呢？ 第一，vh/vw的含义。 视口（viewport） 在桌面端，指的是浏览器的可视区域；在移动端，指的是Viewport中的Layout Viewport。浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。 在css3规范中，1 vw 等于视口宽度的1%，1 vh 等于视口高度的1%。vh 和 vw 是相对于视口的
vw/vh和100%的区别
lovezhuer1的博客
07-06 6170
在实现自适应布局时往往会用到vh/vw和100%，那么vh/vw和100%的区别是什么呢？要了解他们之间的区别，首先要了解vh、vw。 vh/vw 视口（viewport） 在桌面端，指的是浏览器的可视区域；在移动端，指的是Viewport中的Layout Viewport。浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。 在css3规范中，1 vw 等于视口宽度的1%，1 vh 等于视口高度的1%。
vue中设置height:100%无效的问题及解决方法
10-18
height: 100vh; } ``` ### 注意事项 - 在添加了上述CSS规则后，需要确保在Vue的挂载点（如#app）下的所有子元素都能正确地继承新的高度设置。 - 如果在应用中存在多个组件层级，并且希望各个组件高度能够正确填充...
height:100%
03-14
然后，结合引用3中的例子，比如使用浮动元素和形状外边距，可能可以举一个实际布局的例子，展示如何正确应用height: 100%。比如创建一个全屏的区块，需要将html和body的高度设为100%，然后子元素继承。 接下来，要...
优化下面代码.bg { width: 100%; height: 100vh; background-image: url('../../assets/img/info-bg.png'); background-size: 100% 100%; background-repeat: no-repeat; position: relative; font-family: AlibabaPuHuiTiR; .goBack { position: absolute; top: 34px; right: 65px; cursor: pointer; color: #ffffff; width: 181px; padding: 15px 10px; background: rgba(24, 31, 30, 0.52); border: 1px solid #4a524e; border-radius: 5px; font-size: 18px; font-family: AlibabaPuHuiTiR; z-index: 111; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .home-left { position: absolute; top: 18%; left: 40px; width: 41%; height: 76%; font-size: 24px; color: #ffffff; } .unit { font-size: 24px; color: #636363; } .home-left-title { font-size: 24px; color: #ffffff; line-height: 36px; } .home-right { position: absolute; top: 18%; right: 88px; width: 46%; height: 78%; } .model { display: flex; justify-content: center; align-items: center; height: 90%; } #threeContained { width: 100%; height: 100%; } .model-qk-img { width: 82%; height: 90%; background-image: url('../../assets/img/howo.png'); background-size: 100% 100%; background-repeat: no-repeat; } .model-zk-img { width: 56%; height: 90%; background-image: url('../../assets/img/heavyT.png'); background-size: 100% 100%; background-repeat: no-repeat; } .model-gj-img { width: 82%; height: 90%; background-image: url('../../assets/img/transit.png'); background-size: 100% 100%; background-repeat: no-repeat; } .car-online { margin-bottom: 50px; } } .day-data { display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 29%; margin-left: 30px; } .day-val { width: 40%; } .prefix { display: inline-block; width: 6px; height: 14px; background: #ffffff; margin-right: 20px; } .zh-title { margin-left: 30px; padding-top: 30px; font-size: 30px; font-weight: 700; text-align: left; color: #ffffff; line-height: 32px; letter-spacing: 0.3px; font-family: AlibabaPuHuiTiB; } .en-title { margin-left: 30px; font-size: 14px; font-weight: 400; text-align: left; color: #ffffff; line-height: 32px; letter-spacing: -0.91px; font-family: AlibabaPuHuiTiR; }
05-31
height: 100vh; background: url('../../assets/img/info-bg.png') no-repeat center center / cover; position: relative; font-family: AlibabaPuHuiTiR; } .goBack { position: absolute; top: 34px; ...
height: 100%;没效果
06-12
如果 `height: 100%;` 没有效果，可能是因为该元素的父级元素没有设置高度，或者该元素的父级元素的高度设置为了固定值，导致子元素无法继承父元素的高度。 你可以尝试在该元素的父级元素中设置高度，并且确保父...
如何让元素height:100%生效？
少油少盐不要辣
05-21 369
有两种方式： 元素设定显示的高度值 普通流元素的百分比高度起作用的话，其父级元素必须有一个生效的高度值！ 元素使用绝对定位 例如： .child{ height: 100%; position: absolute; }
CSS 中高度 100%和高度 100vh 有什么区别
weixin_64684095的博客
08-24 1592
表示元素的高度是相对于其父元素的高度而言的。如果父元素没有明确的高度设置，那么子元素设置为 height:100% 将不会有确定的高度值。
height:100%和height:100vh的区别
gztrljh
11-27 777
vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%; 但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0， 但是设置height:100vh，该元素会被撑开屏幕高度一致。
css height:单位 % 高度 跟vh高度区别
m0_37678007的博客
01-09 1387
以上内容来自：[chatgpt中文网][https:bk.suning.info]
设置vh使div元素高度充满屏幕
sunshine_xtt的博客
05-14 8102
在做项目的过程中老师要求要让div元素充满整个屏幕，之后查资料发现vh和vw，就做一个简单的介绍 1.vh css3新单位，view height的简写，是指可视窗口的高度。1vh=视窗高度的1%，height: 100vh;就是屏幕高度的100%，也就是高度满屏。 heigth:100vh; 2.vm css3新单位，view width的简写，是指可视窗口的宽度。1vw=视窗宽度的1%,wi...
html vh和百分比,css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位...
weixin_31689491的博客
06-22 3706
css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位height:100vh一些只能vw, vh才能完成的应用场景：1. 场景之：元素的尺寸限制vw vh 主要是实现了动态高度百分比布局，比如宽高比不固定的图片，vw很轻易的实现正方形图片缩略图原始大图的尺寸限制问题——因为很有可能图片过大，尼玛一屏显示器区域不够放，我们需要对其进行缩放处理。这类限制的实现，在当下，需...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值