vh，可视窗口100%高

最新推荐文章于 2025-10-13 16:37:10 发布
转载 最新推荐文章于 2025-10-13 16:37:10 发布 · 2.5k 阅读 · 2

本文详细介绍了视口单位vh与vw的概念及其计算方式。例如1vh等于1/100的视口高度，若浏览器高度为900px，则1vh等于9px；同样地，如果视口宽度为750px，则1vw等于7.5px。

1vh 等于1/100的视口高度。

例：浏览器高度900px, 1 vh = 900px/100 = 9 px。同理，如果视口宽度为750， 1vw = 750px/100 = 7.5 px。


100vh就是可视窗口的高，类似body的100%

获取可视窗口的高度
weixin_34279246的博客
12-28 440
2019独角兽企业重金招聘Python工程师标准>>> ...
可视窗口的宽度高度
logic51551的博客
04-01 959
情况1:包括滚动条的宽度高度 包含有滚动条宽度高度 滚动条的大小,有的时候是16,有的时候是17 结果只是数值 window.innerHeight 高度 window.innerWidth 宽度 情况2:不包括滚动条宽度高度 document.documentElement.clientHeight 高度 document.documentEle...
前端布局踩坑记：为什么加个 padding 就让 100vh 超出了？
最新发布
有来技术
10-13 865
CSS布局中，使用min-height:100vh时出现滚动条的问题通常源于默认的content-box盒模型。该模型会额外计算padding到元素总高度中，导致实际高度变为100vh+padding。解决方案是改用border-box盒模型，使高度计算包含padding，推荐全局设置box-sizing:border-box。移动端建议使用新单位100dvh以适配动态视口。核心要点：统一盒模型能让100vh真正占满视口，避免意外的布局问题。
JS-获取可视窗口的宽高度
DcTbnk的博客
04-01 1029
情况1:包括滚动条的宽度高度 包含有滚动条宽度高度 滚动条的大小,有的时候是16,有的时候是17 结果只是数值 window.innerHeight 高度 window.innerWidth 宽度 情况2:不包括滚动条宽度高度 document.documentElement.clientHeight 高度 document.documentElement.clientWidth 宽度 conso...
获取浏览器窗口可视区域的高度和宽度
博客of me
08-22 2405
这是浏览器窗口的内部高度，即可视区域的高度，不包括浏览器的工具栏、标签栏等非内容区域的部分。这是最常用的获取窗口可视区域高度的方法。这通常与窗口可视区域的高度相同，但是在一些情况下，可能会受到CSS样式的影响。然而，这种方法在某些浏览器和情况下可能会失效，因为。不可用，这个属性会尝试获取文档的根元素（通常是。: 如果前两种方法都不可用，这个属性会尝试获取。元素可能没有占满整个可视区域。另外，还可以计算对角线长度。解释：（以高度为例）
使用vh自适应大屏展示高度
small_fox_dtt的博客
11-25 615
高度计算用 设计稿上得盒子高度/（设计稿总高度/100）
100vh和100%的区别
Rebecca_tan_lang的博客
05-25 3320
介绍 vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%; 我的案例： 元素没有设置高度的时候， 我写移动端界面的时候用100vh会把屏幕撑大到需要滑动框，但是100%却不会。 我是怎么解决的呢：在最外层包一个div,给这个div设置height：100vh ...
vh/vw和100%的区别
caigua8700的博客
12-04 2755
在实现自适应布局时往往会用到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 是相对于视口的
100vh
virus111222的博客
06-30 4450
可以帮助我们创建占据整个视口高度的元素，使其适应不同屏幕大小和分辨率的设备。是相对于视口高度的，而不是相对于整个页面的高度。如果页面有滚动条，滚动页面并不会改变视口高度，因此。是一个 CSS 单位，表示视口（浏览器窗口）的高度。具体来说，它表示相对于视口高度的百分比，其中。是一个很便利的 CSS 单位，可以用于创建具有全屏高度的元素或布局，以及实现响应式设计。如果浏览器窗口的高度改变为 1200 像素，那么。举个例子，如果浏览器窗口的高度为 800 像素，那么。，使其占据整个浏览器窗口的可见区域。
css中100%与100vh区别
survivorsfyh的博客
02-03 692
100% 与 100vh 的区别
100vh与100%的区别
seimeii的博客
08-11 598
100%与vh的区别
CSS之100%和100vh的区别
Good Luck
05-25 1万+
height：100%是铺满父容器的高度。 height：100vh是指铺满屏幕的高度。
Css 设置vw和vh=100% 出现滚动条，内容超出视口 原因及解决
qq_40071931的博客
02-27 1896
如图，而背景视频超出部分和滚动条一样宽，而宽度不包含滚动条(即视口宽度-滚动条宽度)，div.outer 超出 html 的部分宽度正好为一个 margin 宽度 + 一个滚动条宽度。检查发现， 含有8px的margin，body > div#app > div.outer，div.outer和视口一样大，又往右下角偏移了8px，故使页面内容超出视口大小导致出现滚动条。滚动条一般不影响视口大小，故滚动条区域也属于视口内，背景视频略超出“可视范围”应该是部分被滚动条遮盖。
Css获取视图宽高vh&vw
smile_ycm的博客
04-01 1710
css推出的快速获取视图宽高的新单位 今天开发项目的时候，本人开始不知道有这个新技术，使用的还是js获取视图的宽高，来进行相应的页面布局，同事突然提出你用的什么单位来判断的视图宽高，用过vh吗？？？？纳尼？？？vh什么鬼？然后很尴尬的问问度娘！ 新单位vh css3新单位，view height的简写，是指可视窗口的高度。假如高度是900px的话。那10vh就是90px （以前一直使用js写，...
css height:100% 和 height:100vh的区别
Bigfishseasugar
07-05 2599
在写样式的时候，遇到了需要设置高度的情况，为了适配不同设备，所以想到百分比 和 vh 两种写法 。但他们有什么区别呢？ vh 就是当前屏幕可见高度的1%， % 是相对于父元素高度的百分比。 当 屏幕可视区域高度 = 其父元素高度 时， 有 height:100vh ==height:100%; 但是当元素没有内容或其父元素没有高度时，设置height:100%，该元素不会被撑开，此时高度为0， 但是设置height:100vh，该元素会被撑开与屏幕可视高度一致。 启发自：http...
关于height:100%和height:100vh的区别
热门推荐
朽木自雕的博客
09-03 10万+
关于height:100%和height:100vh的区别 vh就是当前屏幕可见高度的1%，也就是说 height:100vh ==height:100%; 但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0， 但是设置height:100vh，该元素会被撑开屏幕高度一致。 ...
vue中动态使用vh calc设置高度
wzwzwz555的博客
05-12 724
【代码】vue中动态使用vh calc设置高度。
CSS | CSS中height:100vh和height:100%的区别
青春木鱼的博客
06-15 1万+
1vh它表示的是当前屏幕可见高度的1/100，而1%它表示的是父元素长或者宽的1%
CSS中height使用100%和100vh的区别
810cheng
03-20 1184
css中height使用100%和100vh的区别
CSS中100vh与100%高度的区别详解
因此，1vh 等于当前浏览器可视区域高度的1%，而 100vh 就等于整个屏幕可见区域的高度。这意味着无论页面内容多少或父元素如何设定，使用 `height: 100vh` 的元素都将占据用户当前能看到的屏幕高度。例如，在移动设备...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值