CSS3中使用calc()计算高度，vh以及vw

最新推荐文章于 2024-08-20 23:30:49 发布

原创最新推荐文章于 2024-08-20 23:30:49 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #calc() #vw #vh

css 专栏收录该内容

11 篇文章

订阅专栏

本文深入探讨了视口单位vw、vh的概念及其应用，详细解释了1vw和1vh分别代表视口宽度和高度的1%。同时，介绍了如何使用calc()函数进行数学运算，以动态调整元素的高度或宽度，如示例中使用calc(100vh-50px)来设置元素的高度。

viewport：是可视窗口，也就是浏览器；
vw Viewport是宽度，1vw 等于viewport宽度的1%；
vh Viewport是高度，1vh 等于viewport高的的1%；

calc()使用通用的数学运算规则计算元素的高度或者宽度。

.scroll-list-wrap
  height calc(100vh - 50px)
  overflow-y auto
  overflow-x hidden

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

leafpanye

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

css-calc动态计算属性值无效

岂不闻

05-29

925

calc动态计算属性值无效，减号左右需要空格，width: calc(100vw - 360px);

【高频考点精讲】CSS 中的单位解析：px、em、rem、vw、vh 的使用场景

全栈老李的博客

05-14

1163

🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。今天咱们聊聊CSS中那些让人又爱又恨的单位——px、em、rem、vw、vh。作为前端工程师，这些单位就像厨房里的调味料，用对了能让页面美味可口，用错了...嗯，你懂的。（全栈老李友情提示：文末有面试题彩蛋，记得看到最后哦～）

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

CSS3 使用 calc() 计算高度 vh px

热门推荐

Ranx的博客

09-28

13万+

1、px 像素，我们在网页布局中一般都是用px。 2、百分比百分比一般宽泛的讲是相对于父元素，自适应网页布局越来越多，百分比也经常用到了。 3、Viewport viewport：可视窗口，也就是浏览器。 vw Viewport宽度， 1vw 等于viewport宽度的1% vh Viewport

爆锤面试官的 CSS 垂直居中的正确方式

Jeddy 部长的博客

07-29

362

前言之锤爆面试官工具神器 - CSS 无论是实际开发中，亦或者是求职面试中，css 垂直居中往往都是一个绕不开的话题，其中不乏有许多面试者在多次双重尝受打击之后，而没有一个很好的反击点，刚好结合自己以前受的委屈和痛苦，来给大家一个锤爆面试官大佬们的机会。其实垂直居中主要分为了两种类型：居中元素宽高已知和居中元素宽高未知，那么我们就结合这两种类型来一一做举例。居中元素宽高已知 1. absolute + margin auto 顾名思义，就是利用当前元素的 position: abs.

css3新单位vw、vh、vmin、vmax的使用详解（附样例）

JoeBlackZQQ的专栏

08-23

2479

From: http://www.hangge.com/blog/cache/detail_1715.html 像 px、em 这样的长度单位大家肯定都很熟悉，前者为绝对单位，后者为相对单位。CSS3 又引入了新单位：vw、vh、vmin、vmax。下面对它们做个详细介绍。一、基本说明 1，vw、vh、vmin、vmax 的含义（1）vw、vh、vmin、vmax 是一种视窗单位...

css3动态计算元素的高度及宽度 calc()

qq_49173190的博客

04-24

1575

文章标签：移动开发 javascript 我们实际开发的时候经常会遇到当已知一个div的高度时，它的同胞div高度是根据窗口高度减去已知div高度而得到，此时就需要calc函数。 viewport：可视窗口，也就是浏览器。 vw Viewport宽度， 1vw 等于viewport宽度的1% vh Viewport高度， 1vh 等于viewport高的的1% CSS3使用Calc calc()使用通用的数学运算规则，但是也提供更智能的功能：使用“+”、“-”、“” 和 “/”四则运算；

css3动态计算元素的高度及宽度

xcj_20160810的博客

06-03

1181

1、px 　　像素，我们在网页布局中一般都是用px。2、百分比　　百分比一般宽泛的讲是相对于父元素，自适应网页布局越来越多，百分比也经常用到了3、Viewport 　　　当已知一个div的高度时，它的同胞div高度是根据窗口高度减去已知div高度而得到，此时就需要calc函数　　viewport：可视窗口，也就是浏览器。　　vw Viewport宽度， 1vw 等于viewport宽度的1% 　　vh Viewport高度， 1vh 等于viewport高的的1% CS...

CSS使用calc()获取当前可视屏幕高度的实现

11-19

当我们想要一个元素的高度等于屏幕的可视高度时，可以使用`vh`单位配合`calc()`。例如，以下CSS代码将使div元素的高度完全填充视窗高度： ```css div { width: 100%; height: calc(100vh); } ``` 这里，`100vh`...

CSS中 calc可以计算vh和rem的差值吗

最新发布

08-07

CSS 的 `calc()` 函数完全支持不同单位之间的混合计算，包括视口单位（`vh`）和相对单位（`rem`）的差值运算。 --- ### 一、基本用法示例 #### 有效语法： ```css .element { /* 视口高度减去2个rem单位 */ ...

CSS 中px、em、rem、%、vw、vh单位之间的区别详解

11-21

同时，为了实现更好的响应式设计，可以结合使用calc()函数和视窗单位，如calc(100vh - 2 * header_height)，来动态计算元素的大小。总之，理解并熟练运用这些CSS单位，可以帮助开发者创建更具灵活性和适应性的网页...

css3中使用calc()计算宽高

qq_37916164的博客

07-07

4008

calc()是什么？是CSS3中新增的一个函数，calculate（计算）的缩写。用于动态计算宽/高，你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】； calc()的语法：使用“+”、“-”、“*” 和 “/”四则运算；可以使用百分比、px、em、rem等单位；可以混合使用各种单位进行计算；表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；表达式中

css3使用calc()计算高度的用法

weixin_45115895的博客

09-18

3391

使用vue进行移动端h5开发时,底部tabbar封装成了公共组件进行使用,计算页面高度时使用100%减去tabbar高度,一直不起作用,今天终于发现自己错在哪里了,真是被自己蠢哭表达式中有“+”和“-”时，其前后必须要有空格,我没有留空格,然后修改了一下写法,问题解决了还是自己太粗心,对这些基本用法没有深入了解,只知道有这么个东西,导致被困惑许久网上搜索的一篇文章个人认为写的还是挺全面的链接如下:链接: https://www.cnblogs.com/gwkzb/p/12524682.html. 内

CSS 使用calc()获取当前可视屏幕高度

Soutv - Hello Bug !

05-03

7万+

先了解一下CSS3的相对长度单位(参考详细教程) ：相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。 em 它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px； ex 依赖于英文字母小 x 的高度 ch 数字 0 的宽度 rem 根元素（html）的...

使用calc()调整元素高度或宽度

qq_44161722的博客

08-30

681

calc() 使用

css3中calc的用法及单位

qq_39594951的博客

11-02

1231

1.css3中calc()函数可以进行尺寸计算，这样可以使样式在浏览器中更加的灵活，能够响应视口的改变示例: .aside{ Height:calc(100vh - 78px); //以视框百分百的高度减去78px的大小 } 2.其中vw,vh,vmin,vmax的含义 Vw:视窗宽度的百分比(1vw代表视窗的宽度为1%) Vh:视窗高度的百分比(1vh代表视窗的高度为1%) Vmin:当前vw和vh中较小的一个值 Vmax:当前vw和vh中较大的一个值 ...

html css高度运算,CSS3 使用 calc() 计算高度 vh 宽度 vw px

weixin_42300211的博客

06-16

1757

1、px ：像素，我们在网页布局中一般都是用px。2、百分比：一般宽泛的讲是相对于父元素，自适应网页布局越来越多，百分比也经常用到了。3、Viewportviewport：可视窗口，也就是浏览器。vw Viewport宽度， 1vw 等于viewport宽度的1%vh Viewport高度， 1vh 等于viewport高的的1%CSS3使用Calccalc()使用通用的数学运算规则，但是也提供更...

css3高度计算函数cal（）

m0_56991207的博客

01-15

891

.foo { position: absolute top: 50%; left: 50%; marging-top: -150px; margin-left: -150px; } 使用 calc() 函数，我们仅仅通过 top 与 left 属性便能实现相同的效果： .foo { position: absolute top: calc(50% - 150px); left: calc(50% - 150px); } ...

css的calc高度计算

neoveee的博客

11-29

7737

场景需求：子div的高度设置为100%的同时，减去10px,可以用css的calc高度计算 div{ height:calc(100%-10) } 参考链接：http://www.ophome.cn/question/32312

css中怎样使calc计算的高度生效？

金木AI

08-20

1569

在这两个示例中，calc() 函数都可以正常计算子元素的高度，并且该高度基于父元素的高度进行计算。第一种情况下，父元素的高度是固定的 500px，而第二种情况下，父元素的高度是视口高度的 50%。对于计算后的高度要生效，通常父元素需要具备一定的高度定义。2、百分比高度：如果父元素的高度是百分比，那么其父元素（祖先元素）也需要有固定高度或百分比高度，最终回溯到一个具有固定高度的元素。3、vh 单位：父元素可以使用 vh（视口高度单位）来设置高度，这样子元素的 calc() 计算也可以生效。