CSS height:100%和height:100vh的区别

最新推荐文章于 2024-10-01 18:55:33 发布
最新推荐文章于 2024-10-01 18:55:33 发布
阅读量2.5k 收藏 4
点赞数 1
分类专栏： 学习笔记 文章标签： javascript css css3 es6 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38605121/article/details/109838981
版权

vh 是 CSS 中的相对长度单位，相对视口高度（Viewport Height），1vh = 1% * 视口高度

也就是说：height:100vh == height:100%

但是元素没有内容的时候，设置 height:100%，该元素不会被撑开，此时高度为0

但是设置 height:100vh，该元素会被撑开跟屏幕高度一致

阅读原文：小鑫の随笔

小鑫a
关注
专栏目录
为什么 height:100%会无效？
liuhao9999的博客
03-23 553
对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值。 原因是如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto，因为解释成了auto， 所以无法参与计算。 使用绝对定位的元素会有计算值，即使祖先元素的height计算为auto也是如此。 ...
css height:单位 % 高度 跟vh高度区别
m0_37678007的博客
01-09 1160
以上内容来自：[chatgpt中文网][https:bk.suning.info]
html vh和百分比,css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位...
weixin_31689491的博客
06-22 3557
css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位height:100vh一些只能vw, vh才能完成的应用场景：1. 场景之：元素的尺寸限制vw vh 主要是实现了动态高度百分比布局，比如宽高比不固定的图片，vw很轻易的实现正方形图片缩略图原始大图的尺寸限制问题——因为很有可能图片过大，尼玛一屏显示器区域不够放，我们需要对其进行缩放处理。这类限制的实现，在当下，需...
CSS中height设置100vh和100%的区别
最新发布
ning的博客
10-01 1178
如果父元素的高度没有被定义，那么子元素即使设置了也不会显示任何高度，因为百分比是基于父元素的高度来计算的。blue;
height:100vh
qq_40001322的博客
06-30 4万+
1.em在做手机端的时候经常会用到的做字体的尺寸单位说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。2.rem这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点...
css3中的width:100vh以及calc(100vh + 10px)
热门推荐
qq_24581629的博客
05-17 4万+
vh/vw vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax; vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin; 视区所指为浏览器内部的可视区域大小， 即window.innerWid
CSS | CSS中height:100vh和height:100%的区别
青春木鱼的博客
06-15 1万+
1vh它表示的是当前屏幕可见高度的1/100，而1%它表示的是父元素长或者宽的1%
在css中 height: 100vh；与height: 100%；有什么区别？
weixin_46300114的博客
03-06 1804
生效，父元素必须具有明确定义的高度，例如固定高度值或相对定位。如果父元素的高度未被明确定义，那么。表示元素的高度将占据视口（浏览器窗口）的高度。无论父元素的高度如何，使用。将使元素占据整个视口的高度，这对于实现全屏或类似效果非常有用。在实际应用中，如果您想让一个元素占据整个视口的高度，可以使用。表示元素的高度将与其父元素的高度相同。如果想让一个元素与其父元素等高，可以使用。在 CSS 中有着不同的含义和应用场景。，前提是父元素具有明确定义的高度。是相对于父元素的高度，而。是相对于视口的高度。
vue中设置height:100%无效的问题及解决方法
10-18
浏览器并不会自动给这些元素添加固定高度，因此，当我们在CSS中给#app设置height:100%时，其父元素html和body的高度实际上是0px，所以#app元素的高度也就随之为0px。此时，高度设置的100%是相对于其高度为0的父元素...
min-height:100%；没有效果
wei_dan1129的博客
04-14 2374
父元素设置min-height子元素高度设置100%取不到值，这是因为子元素 div设置 height:100%；只有当父级元素满足min-height:1000px;设置的条件才触发；浏览器默认是不会触发的，所以子元素的100%的高度继承就失效了。min-height 是在 height 计算之后再套用的. 解决方法：给父元素加绝对定位，然后子元素加相对定位，这样子元素的高度就会根据父元素的高度进行计算 .index-wrap{ background: rgba(0, 0, 0, 0.03);
优化下面代码.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; ...
CSS难点 为什么height设置100%会失效，分栏目等高布局(高度自适用布局)的实现方案...
04-23 1097
前言 相信在平时写CSS的时候大家都或多或少遇见过设置了height为百分比的时候发现不起作用。今天我们就来一探究竟 原因：父元素未设置具体高度，子元素设置height:100%是无效的。 现象以及方案 [1] 设置高度为100%时，无法实现全屏 <!DOCTYPE html> <html lang="en"> <head> <meta ...
css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位
仗剑天涯，从摘要开始
04-26 683
height:100vh 一些只能vw, vh才能完成的应用场景： 1. 场景之：元素的尺寸限制 vw vh 主要是实现了动态高度百分比布局，比如宽高比不固定的图片，vw很轻易的实现正方形图片缩略图 原始大图的尺寸限制问题——因为很有可能图片过大，尼玛一屏显示器区域不够放，我们需要对其进行缩放处理。 这类限制的实现，在当下，需要获得图片的原始大小，以及浏览器内部尺寸，算大小，算比例等，...
height:100vh的应用
JiAyInNnNnN123的博客
01-02 575
今天改移动端页面样式的时候因为height:100vh，导致我想超出部分滚动页面的效果没有做出来。就查查这玩意是啥意思。 别人解释的height:100vh vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%; 但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0， 但是设置height:100vh，该元素会被撑开屏幕高...
尺寸单位em,rem,vh,vw
前端学习日记
02-12 8787
这几天做demo，看了网上教程有用到尺寸单位vh，vw， 这些单位不是很熟悉，所以上网上找了些资料来认识了这些不认识的单位 1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5 但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照
css height:100% 和 height:100vh的区别
Bigfishseasugar
07-05 2342
在写样式的时候，遇到了需要设置高度的情况，为了适配不同设备，所以想到百分比 和 vh 两种写法 。但他们有什么区别呢？ vh 就是当前屏幕可见高度的1%， % 是相对于父元素高度的百分比。 当 屏幕可视区域高度 = 其父元素高度 时， 有 height:100vh ==height:100%; 但是当元素没有内容或其父元素没有高度时，设置height:100%，该元素不会被撑开，此时高度为0， 但是设置height:100vh，该元素会被撑开与屏幕可视高度一致。 启发自：http...
【CSS基础】关于height:100%和height:100vh的区别
Milk~每天分享一点点，技术进步一点点
09-11 1967
关于height:100%和height:100vh的区别 vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%; 但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0， 但是设置height:100vh，该元素会被撑开屏幕高度一致。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值