css3新发现height:100vh;

最新推荐文章于 2025-06-20 12:07:26 发布
转载 最新推荐文章于 2025-06-20 12:07:26 发布 · 3.3w 阅读 · 37

本文详细解析了CSS3中的calc()函数及视口单位vh、vw、vmax、vmin的使用方法，介绍了如何利用这些特性实现动态布局，特别关注于流体布局的宽度和高度设置。

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

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的大小
  • 1
  • 2

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

calc()的兼容性如下，使用时需注意：

这里写图片描述

CSS中的100vh是什么？
YabClass的博客
09-26 2395
在某些移动设备上，浏览器的地址栏和导航栏可能会占据视口的一部分，从而导致实际的视口高度小于屏幕的高度。在这种情况下，可以考虑使用JavaScript等技术来动态调整元素的高度，以适应实际的视口高度。因此，当这个类应用于一个元素时，该元素的高度将等于视口的高度。总之，CSS中的100vh是一个非常有用的单位，可以帮助我们创建响应式的网页布局，使元素的高度自适应视口的高度。例如，如果用户在手机上浏览网页，视口的高度将与手机屏幕的高度相对应。具体而言，vh代表视口高度的百分比，其中1vh等于视口高度的1%。
笔记(css3)-动画
qq_43260366的博客
01-29 811
它分为2D转换 或 3D转换，一般与动画结合使用。没有设置初始状态，则初始状态为添加动画元素的初始状态。问题：上图在展开和收缩的时候想做一个过渡动画，但是发现设置了不起作用；transform是一个复合属性，可以同时设置平移、旋转、缩放。现在想做一个效果就是 “开”在水平方向居中且一直旋转，实现如下。但是结果却与预期不同，原因是因为在帧动画中。总结：内容撑开的盒子没有办法做宽高的过渡动画。需要值得注意的是，变换的执行顺序是。,做成一个呼吸效果的动画，->-> 添加动画效果，实现如下。这个属性一直在被重新；
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
移动端布局避坑指南：从100vh到dvh，彻底解决动态视口适配难题
程序员成长指北
06-20 305
但在移动端，情况却大不相同。在移动互联网浪潮下，前端开发者常常遭遇「桌面完美，移动翻车」的尴尬困境：精心设计的页面在手机端频繁出现内容截断、布局抖动，甚至因浏览器工具栏的显隐引发「位移惨案」。因此，在实际开发中，建议进行充分的测试，并为不支持这些单位的浏览器提供合适的备用方案，以确保页面在各种移动设备上都能有良好的显示效果。幸运的是，随着 CSS 技术的发展，我们有了更好的解决方案。但是，在移动设备上的表现就差强人意了，移动设备的视口大小会受动态工具栏（例如地址栏和标签栏）存在与否的影响。
height:100vh
u010227042的博客
06-11 609
1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5 但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。 2.rem 这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。 参照后面给的demo 3.vh vh就是当前屏幕可见高度的1%，
Height：100vh
NnbNnb的博客
10-26 741
Height：100vh vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%; 但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开， 但是设置height:100vh，该元素会被撑开屏幕高度一致。 ...
vue中设置height:100%无效的问题及解决方法
10-18
通常，开发者可能期望通过简单的CSS设置，让某个div元素的高度能够占满其父级元素的全部高度，但是却发现高度并没有如预期般拉伸。这通常发生在Vue项目中设置最外层挂载点（如App.vue中的根元素）时。在这篇文章中，...
``` <!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: &#39;&#39;; 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: &#39;&#39;; position: absolute; width: 100px; /* 十字线水平长度 */ height: 2px; /* 线粗 */ background: #00f7ff; transform: translateX(-45%); /* 向左偏移一半宽度 */ } /* 垂直线 */ #movableCrosshair::after { content: &#39;&#39;; 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(&#39;keydown&#39;, function(event){ const crosshair = document.getElementById(&#39;movableCrosshair&#39;); let style = window.getComputedStyle(crosshair); let topValue = parseInt(style.getPropertyValue(&#39;top&#39;)); let leftValue = parseInt(style.getPropertyValue(&#39;left&#39;)); switch (event.key) { case &#39;ArrowUp&#39;: crosshair.style.top = `${topValue - 1}px`; break; case &#39;ArrowDown&#39;: crosshair.style.top = `${topValue + 1}px`; break; case &#39;ArrowLeft&#39;: crosshair.style.left = `${leftValue - 1}px`; break; case &#39;ArrowRight&#39;: 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已经成为构建现代网页的标准工具。...
/* 文件路径: webapp/components/custom-form-modal/index.wxss */ .custom-form-modal { height: 80vh; border-top-left-radius: 8rpx; border-top-right-radius: 8rpx; display: flex; flex-direction: column; overflow: hidden; max-width: 100vw; box-sizing: border-box; } .modal-header { display: flex; justify-content: flex-start; align-items: center; padding: 10rpx 16rpx; /* 极小的内边距 */ border-bottom: 1rpx solid #eee; flex-shrink: 0; } .modal-header .title { font-size: 20rpx; /* 极小的标题字体 */ font-weight: bold; } .form-content { flex: 1; padding: 0 16rpx; /* 极小的内边距 */ overflow-y: auto; } .section-title { font-size: 18rpx; /* 极小字体 */ font-weight: bold; padding: 8rpx 0 4rpx; /* 极小的内边距 */ border-bottom: 2rpx solid #eee; margin-bottom: 4rpx; /* 极小的间距 */ } .form-row { display: flex; align-items: center; min-height: 40rpx; /* 极小的行高 */ padding: 4rpx 0; /* 极小的内边距 */ border-bottom: 2rpx solid #eee; flex-wrap: nowrap; } .row-title { min-width: 20%; font-size: 16rpx; /* 目标字体大小 */ color: #333; padding-right: 0rpx; /* 极小的间距 */ margin-right: 0rpx; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .title-text { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16rpx; /* 确保字体统一 */ } .row-content { width: 100%; flex: 1; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; padding: 0 0 0 0; border-bottom: 1rpx solid #555555; gap: 4rpx; /* 极小的间隙 */ } /* 错误提示放在单独一行 */ .error-message { color: #ee0a24; font-size: 14rpx; /* 极小的字体 */ width: 100%; text-align: right; padding: 0 0 4rpx 0; /* 极小的内边距 */ margin: -4rpx 0 0 0; /* 负边距减小空间 */ } .time-picker, .select-picker { padding: 6rpx 0; /* 极小的内边距 */ font-size: 16rpx; /* 目标字体大小 */ text-align: left; flex: 1; min-width: 60%; } .select-container { display: flex; align-items: center; flex: 1; min-width: 70%; } .inline-button { margin-left: 4rpx; /* 极小的边距 */ flex-shrink: 0; font-size: 14rpx; /* 按钮字体更小 */ } .modal-footer { display: flex; padding: 8rpx 16rpx; /* 极小的内边距 */ gap: 12rpx; /* 极小的间距 */ border-top: 1rpx solid #eee; flex-shrink: 0; } .modal-footer van-button { flex: 1; height: 40rpx; /* 极小的按钮高度 */ line-height: 40rpx; font-size: 16rpx; /* 目标字体大小 */ } /* 加载状态样式 */ .loading-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; background: rgba(255, 255, 255, 0.8); padding: 12rpx; border-radius: 8rpx; font-size: 16rpx; /* 目标字体大小 */ } /* 横屏适配 */ @media (orientation: landscape) { .custom-form-modal { height: 90vh; width: 80vw; margin: 0 auto; border-radius: 8rpx; } .form-row { max-width: 80%; min-height: 40rpx; /* 横屏也保持紧凑 */ } .row-title { max-width: 80rpx; flex: 0 0 25%; font-size: 18rpx; /* 横屏稍大 */ } .section-title { font-size: 20rpx; padding: 8rpx 0 4rpx; } .title-text { font-size: 18rpx; } .time-picker, .select-picker { font-size: 18rpx; } .modal-footer van-button { height: 50rpx; line-height: 50rpx; } } /* 超紧凑模式 */ .ultra-compact .form-row { min-height: 32rpx; padding: 2rpx 5rpx; } .ultra-compact .row-title { font-size: 14rpx; } .ultra-compact .title-text { font-size: 14rpx; } .ultra-compact .row-content { gap: 2rpx; } .ultra-compact .time-picker, .ultra-compact .select-picker { padding: 4rpx 0; font-size: 14rpx; } .ultra-compact .modal-footer { padding: 4rpx 16rpx; } .ultra-compact .modal-footer van-button { height: 32rpx; line-height: 32rpx; font-size: 14rpx; } .ultra-compact .error-message { font-size: 12rpx; } /* 文件路径: webapp/components/custom-form-modal/index.wxss */ /* 添加以下样式 */ /* 自定义下拉框容器 */ .filter-picker-container { flex: 1; min-width: 70%; } /* 调整下拉框高度 */ .filter-picker { height: 30rpx; /* 极小的下拉框高度 */ } /* 输入框样式调整 */ .picker-input { height: 30rpx; /* 极小的输入高度 */ line-height: 30rpx; font-size: 14rpx; /* 极小的字体 */ padding: 4rpx 8rpx; /* 极小的内边距 */ } /* 下拉选项样式 */ .dropdown-item { padding: 6rpx 10rpx; /* 极小的内边距 */ font-size: 14rpx; /* 极小的字体 */ } /* 按钮与下拉框的对齐 */ .select-container { display: flex; align-items: center; gap: 4rpx; /* 极小的间距 */ } .inline-button { height: 30rpx; /* 与下拉框高度一致 */ line-height: 30rpx; padding: 0 8rpx; /* 极小的内边距 */ font-size: 12rpx; /* 极小的字体 */ } 优化简化去重
最新发布
08-02
3. **统一尺寸规范**：使用 CSS 变量定义基础尺寸 4. **优化媒体查询**：简化横屏适配规则 5. **重构紧凑模式**：使用更简洁的实现方式 以下是优化后的代码： ```css /* ===== 基础变量定义 ===== */ :root { --...
在css中 height: 100vh；与height: 100%；有什么区别？
weixin_46300114的博客
03-06 2176
生效，父元素必须具有明确定义的高度，例如固定高度值或相对定位。如果父元素的高度未被明确定义，那么。表示元素的高度将占据视口（浏览器窗口）的高度。无论父元素的高度如何，使用。将使元素占据整个视口的高度，这对于实现全屏或类似效果非常有用。在实际应用中，如果您想让一个元素占据整个视口的高度，可以使用。表示元素的高度将与其父元素的高度相同。如果想让一个元素与其父元素等高，可以使用。在 CSS 中有着不同的含义和应用场景。，前提是父元素具有明确定义的高度。是相对于父元素的高度，而。是相对于视口的高度。
CSS | CSS中height:100vh和height:100%的区别
青春木鱼的博客
06-15 1万+
1vh它表示的是当前屏幕可见高度的1/100，而1%它表示的是父元素长或者宽的1%
width:100vh有感而发
weixin_34082789的博客
03-28 244
　　在看一个网页的代码是看到 　　　　width:100vh 　　纳尼。。。这这我怎么没有见过，这是个什么属性，随之有看到 min-height:calc(100vh + 51px);这尼玛又是怎么用的.... 　　感叹入行已整整两年却... 　　先介绍一下vh:相对于视窗的高度，那么vw:则是相对于视窗的宽度 　　“视区”所指为浏览器内部的可视区域大小，即window.innerWi...
css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位
仗剑天涯，从摘要开始
04-26 822
height:100vh 一些只能vw, vh才能完成的应用场景： 1. 场景之：元素的尺寸限制 vw vh 主要是实现了动态高度百分比布局，比如宽高比不固定的图片，vw很轻易的实现正方形图片缩略图 原始大图的尺寸限制问题——因为很有可能图片过大，尼玛一屏显示器区域不够放，我们需要对其进行缩放处理。 这类限制的实现，在当下，需要获得图片的原始大小，以及浏览器内部尺寸，算大小，算比例等，...
尺寸单位em,rem,vh,vw
前端学习日记
02-12 8848
这几天做demo，看了网上教程有用到尺寸单位vh，vw， 这些单位不是很熟悉，所以上网上找了些资料来认识了这些不认识的单位 1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5 但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照
CSS中height设置100vh和100%的区别
ning的博客
10-01 1940
如果父元素的高度没有被定义，那么子元素即使设置了也不会显示任何高度，因为百分比是基于父元素的高度来计算的。blue;
width设置100vh但出现横向滚动条的问题
c_studer_的博客
11-23 1072
这时,滚动条会占据一定的宽度，这会导致元素的实际宽度超过视口的可见宽度，从而出现横向滚动条。body是有默认样式的, 会有一定的默认边距, 把默认边距清除就是正常的了。：子元素的宽度会根据父元素的宽度进行计算，不会超过父元素的宽度。的元素宽度也不会超过视口的可见宽度，所以不会出现横向滚动条。：父元素的宽度是视口的宽度减去滚动条的宽度（如果有滚动条）。在width中减去滚动条的宽度就可以了, 一般是17px,时，元素的宽度会占据整个视口的宽度，包括滚动条的宽度。表示元素的宽度是其父元素宽度的 100%。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值