css3新发现height:100vh;

最新推荐文章于 2025-10-01 22:43:48 发布

转载最新推荐文章于 2025-10-01 22:43:48 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://blog.csdn.net/wkj001/article/details/94872296

文章标签：

#css3 #单位

vh/vw
vh: 相对于视窗的高度, 视窗被均分为100单位的vh;
vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;

vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;
vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;
视区所指为浏览器内部的可视区域大小，
即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

calc
calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

calc是 css3提供的一个在css文件中计算值的函数：

用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-“, “*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则；

calc(100vh - 10px)  表示整个浏览器窗口高度减去10px的大小
calc(100vw - 10px)   表示整个浏览器窗口宽度减去10px的大小

一般用来设置流式布局宽高，当然，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值

calc()的兼容性如下，使用时需注意：
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一行代码的程序员

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS中的100vh是什么？

YabClass的博客

09-26

2580

在某些移动设备上，浏览器的地址栏和导航栏可能会占据视口的一部分，从而导致实际的视口高度小于屏幕的高度。在这种情况下，可以考虑使用JavaScript等技术来动态调整元素的高度，以适应实际的视口高度。因此，当这个类应用于一个元素时，该元素的高度将等于视口的高度。总之，CSS中的100vh是一个非常有用的单位，可以帮助我们创建响应式的网页布局，使元素的高度自适应视口的高度。例如，如果用户在手机上浏览网页，视口的高度将与手机屏幕的高度相对应。具体而言，vh代表视口高度的百分比，其中1vh等于视口高度的1%。

【高频考点精讲】CSS backdrop-filter实战：如何实现iOS风格的毛玻璃效果？

全栈老李的博客

07-06

825

backdrop-filter这个属性虽然简单，但用好了真的能让你的设计质感提升一个档次。不过老李还是要提醒大家，特效虽好，不要贪杯——始终要记得考虑性能和用户体验的平衡。如果你对这类CSS高级特效感兴趣，不妨关注老李的专栏，下周我们会深入讲解CSS clip-path的创意用法，教你如何用纯CSS实现那些看似需要PS才能完成的高级图形效果！（全栈老李原创，转载请联系授权）

参与评论您还未登录，请先登录后发表或查看评论

CSS长度单位：vh、vw、vmin、vmax、em、rem、ex、ch、px

从入门到放弃的博客

08-05

4571

CSS的长度单位。一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。长度单位包括包括：相对单位和绝对单位。相对长度单位包括有： em, ex, ch, rem, vw, vh, vmax, vmin 绝对长度单位包括有： cm, mm, q, in, pt, pc, px 1、vh、vw 有点像width和height属性，...

深入解析 CSS `height` 属性

热门推荐

qq_24581629的博客

05-17

4万+

vh/vw vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax; vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin; 视区所指为浏览器内部的可视区域大小，即window.innerWid

height: calc(100vh - 100px)；

fury的博客

09-30

4466

因此，这段代码的意思是将元素的高度设置为视窗高度减去100像素。这样，元素的高度会根据视窗大小自动调整，并且保留一定的空间（100像素）在顶部或底部。其中，vh是视窗的高度单位，表示相对于视窗高度的百分比，1vh等于视窗高度的1%。而px则是像素单位，表示具体的像素数值。这段代码是用来设置元素的高度。它使用了CSS的calc()函数来计算高度值，公式为100vh - 100px。

vue中设置height:100%无效的问题及解决方法

10-18

通常，开发者可能期望通过简单的CSS设置，让某个div元素的高度能够占满其父级元素的全部高度，但是却发现高度并没有如预期般拉伸。这通常发生在Vue项目中设置最外层挂载点（如App.vue中的根元素）时。在这篇文章中，...

<div class="container"> <div class="top"> <div class="top-left"> <div class="top-left-side"> </div> <div class="top-left-content"> <div class="logo"> <img src="/plugin_assets/polls/images/icon-company.png" alt="公司图标"> <div class="logo-text"> <div class="company-name">武汉光庭信息技术股份有限...</div> <div class="platform-name">数字化学习平台</div> </div> </div> <div class="nav"> <div class="nav-item"> <img src="/plugin_assets/polls/images/icon-home.png" alt="首页"> <span>首页</span> </div> <div class="nav-item"> <img src="/plugin_assets/polls/images/icon_study.png" alt="学习中心"> <span>学习中心</span> </div> <div class="nav-item"> <img src="/plugin_assets/polls/images/icon_shop.png" alt="知识商城"> <span>知识商城</span> </div> <div class="nav-item"> <img src="/plugin_assets/polls/images/icon_profile.png" alt="个人中心"> <span>个人中心</span> </div> </div> </div> </div> <div class="top-right"> <div class="search"> <label> <input type="text" placeholder="请输入想要的内容"> </label> <a class="search-icon">🔍︎</a> </div> </div> </div> <div class="bottom"> </div> </div> <style> * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } .container { display: flex; flex-direction: column; height: 100vh; } .top { height: 10vh; background-color: #f0f0f0; border-bottom: 1px solid #ccc; display: flex; box-sizing: border-box; background-color: hsla(0, 0%, 100%, 0.6); } .top-left { flex: 0 0 66%; display: flex; align-items: center; } .top-left-side { flex: 0 0 30%; display: flex; align-items: center; } .top-left-content { flex: 0 0 70%; display: flex; align-items: center; gap: 20px; } .top-right { display: flex; align-items: center; justify-content: flex-start; } .logo { display: flex; align-items: center; } .logo img { width: 38px; height: 38px; margin-right: 16px; } .logo-text { display: flex; flex-direction: column; overflow: hidden; } .company-name { font-size: 18px; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .platform-name { font-size: 14px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .nav { display: flex; gap: 25px; justify-content: flex-start; } .nav-item { display: flex; flex-direction: row; align-items: center; white-space: nowrap; gap: 3px; font-size: 16px; color: #a9a9a9; text-decoration: none; transition: color 0.3s; } .nav-item img { width: 20px; height: 20px; flex-shrink: 0; display: block; } .nav-item:hover { color: #007bff; } .search { flex: 0 0 285px; position: relative; max-width: 400px; display: inline-block; } .search input { width: 100%; height: 30px; padding-left: 35px; font-size: 14px; border: 1px solid #759fcf; border-radius: 4px; box-sizing: border-box; } .search-icon { position: absolute; left: 0; top: 0; height: 100%; width: 30px; display: flex; align-items: center; justify-content: center; pointer-events: none; color: #888; font-size: 16px; background: transparent; border: none; } /*********************bottom****************************/ .bottom { background-color: rgba(242, 242, 242, 0.3); } </style> bottom 背景色不作用

09-17

| flex 布局无效 | 父容器未设置 height | 确保 `.container` 高度为 100vh | | 背景色被覆盖 | 子元素设置了 background | 检查子元素层级关系 | --- ### ✅ **扩展优化建议** 1. **响应式适配** ```css @media...

``` <!DOCTYPE html> <html> <head> <title></title> <style> body { background-color: #000; margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; } #centerCrosshair { position: absolute; width: 20px; /* 十字线宽度 */ height: 20px; /* 十字线高度 */ top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 使用伪元素创建水平和垂直线 */ #centerCrosshair::before, #centerCrosshair::after { content: ''; position: absolute; background-color: red; } /* 水平线 */ #centerCrosshair::before { width: 100px; /* 水平线长度 */ height: 3px; /* 水平线粗细 */ left: 50%; transform: translateX(-55%); } /* 垂直线 */ #centerCrosshair::after { width: 3px; /* 垂直线粗细 */ height: 100px; /* 垂直线长度 */ top: 50%; transform: translateY(-55%); } #movableCrosshair { position: absolute; width: 0; /* 容器尺寸清零 */ height: 0; transform: translate(-50%, -50%); /* 中心点对齐 */ top: calc(50% + 20px); /* 初始位置 */ left: calc(50% + 20px); } /* 水平线 */ #movableCrosshair::before { content: ''; position: absolute; width: 100px; /* 十字线水平长度 */ height: 2px; /* 线粗 */ background: #00f7ff; transform: translateX(-45%); /* 向左偏移一半宽度 */ } /* 垂直线 */ #movableCrosshair::after { content: ''; position: absolute; width: 2px; /* 线粗 */ height: 100px; /* 十字线垂直长度 */ background: #00f7ff; transform: translateY(-45%); /* 向上偏移一半高度 */ } </style> </head> <body> <div id="centerCrosshair"></div> <div id="movableCrosshair"></div> <script> document.addEventListener('keydown', function(event){ const crosshair = document.getElementById('movableCrosshair'); let style = window.getComputedStyle(crosshair); let topValue = parseInt(style.getPropertyValue('top')); let leftValue = parseInt(style.getPropertyValue('left')); switch (event.key) { case 'ArrowUp': crosshair.style.top = `${topValue - 1}px`; break; case 'ArrowDown': crosshair.style.top = `${topValue + 1}px`; break; case 'ArrowLeft': crosshair.style.left = `${leftValue - 1}px`; break; case 'ArrowRight': crosshair.style.left = `${leftValue + 1}px`; break; } }); </script> </body> </html>```给movableCrosshair十字线加上刻度，将优化后的代码直接整体输出

03-09

linear-gradient(90deg, #00f7ff 100%, transparent 100%); 但这样可能需要调整位置。或者，可能更简单的是，将原来的线作为底色，然后在上面叠加刻度线。但需要注意颜色的一致性。或者，刻度线的颜色和线本身...

HTML5与CSS3新特性应用分析：移动端前沿技术揭秘

[HTML5与CSS3新特性应用分析：移动端前沿技术揭秘](https://techbrij.com/img/654/css-selector-sibling-adjacent.jpeg) # 摘要随着移动互联网和前端技术的迅猛发展，HTML5与CSS3已经成为构建现代网页的标准工具。...

width:100vh有感而发

凯子的专栏

02-27

2万+

在看一个网页的代码是看到 width:100vh 纳尼。。。这这我怎么没有见过，这是个什么属性，随之有看到 min-height:calc(100vh + 51px);这尼玛又是怎么用的.... 感叹入行已整整两年却... 先介绍一下vh:相对于视窗的高度，那么vw:则是相对于视窗的高度 “视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.inn

css样式中设置height: calc(100vh-50px)不生效

LxyingINGing的博客

01-03

3226

表示视口高度的百分比，具体数值取决于当前浏览器窗口的高度。例如，如果浏览器窗口的高度为800像素，那么。表示视口（viewport）的高度。视口是指浏览器窗口中可见内容的区域，即用户能够看到的网页部分。不包括浏览器的工具栏、地址栏或其他浏览器界面的高度。它仅表示可见内容的高度。，这意味着元素的高度将是视口高度减去50像素。，可能导致计算错误。您可以尝试将代码修改为。确保在减法运算符前后添加空格。这样可以确保正确计算。

CSS calc()函数与单位vh 常见height：100vh

guojing5721的专栏

07-24

1万+

calc() 函数属于CSS3版本内容，用于动态计算长度值。例如：width: calc(100% - 10px)；需要注意的是，运算符前后都需要保留一个空格。calc()函数支持 "+", "-", "*", "/" 运算；举例，给一个div动态设置宽度如下: #divBox { position: absolute; left: 50px; width: calc(100% - 100p...

css中100vh 加减运算

寬真

06-11

7285

vh/vwvh: 相对于视窗的高度, 视窗被均分为100单位的vh;vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;视区所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。 calc ca...

calc(100vh - 10px) calc(100vw - 10px) calc(100% - 10px) 简单说明

Asa的专栏

12-05

3万+

在讲calc之前先说一下 vh vw： vw 相对于视口的宽度。视口被均分为100单位的vw vh 相对于视口的高度。视口被均分为100单位的vh vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax vmin 相对于视口的宽度或高度中较小的那个。其

width:100vh与min-height:calc(100vh + 51px)

weixin_30577801的博客

06-13

2045

vh:相对于视窗的高度，那么vw:则是相对于视窗的高度。 “视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。详细vh的用法，大家可以参考http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-uni...