less 文件中 height: calc(~‘100vh - 176px‘) ~的作用

最新推荐文章于 2023-12-15 11:49:12 发布
最新推荐文章于 2023-12-15 11:49:12 发布
阅读量424 收藏
点赞数
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u010009584/article/details/126388265
版权
本文探讨了CSS中不常见的`~`运算符，它用于选择器之间具有特定关系的元素。`left: ~'calc(20%)'`中的`~`是一个通用兄弟选择器，表示选择所有在当前元素之后，并且与之同级的元素，当它们的父元素是`calc(20%)`的直接相邻兄弟时。这个运算符在CSS布局和动态计算中具有一定的应用价值。

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

纱
关注
几种经典的居中技巧（垂直和水平居中）
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
03-25 5369
技巧一（推荐指数★★★★★）采用top、right、bottom、left，可以不在乎父元素的宽度和高度，对GPU损耗低于技巧三，但是对浏览器内存的消耗高于技巧三 .子元素 { /*父元素需要position: relative|absolute;*/ position: absolute; margin: auto; ...
calc计算宽高结果不是预期值的坑
小男哥的博客
12-08 693
calc计算宽高与实际值不符 在web页面中，针对不同屏幕大小，合理的使用 calc() 方法可以让页面拥有更好的体验性。在使用此方法时只要稍微注意运算符前后有空格即可，然而今天遇到的情况让我觉得我又tm涨姿势了～ 情况是这样的： 要给一个列表加一个高度，超出高度后进行滚动，由于我用的是笔记本，生产环境基本上都是使用的台式机，写死固定高度肯定不行，于是写成了这样 height: calc(100vh - 291px); overflow: auto; Everything looks lik
less中如何使用calc
2301_77456141的博客
09-05 1287
普通写css时使用calc直接height：calc（100vh-60px)即可，但是我们发现在less编译模式中不管用了，是因为在less中 calc(100% -4rem) 等带单位混合运算会被less解析忽略单位，全部按照百分比计算，此例中的计算被less编译成calc(96%)。
Less高度计算calc方法总结，Less注释
青颜的天空的博客
05-28 4579
Less高度计算calc方法总结，Less注释
less和scss中使用calc问题
細水、長流√的专栏
02-28 455
记录一个问题：在less中使用calc出现了非预期的编译结果。在上例中，预期的结果是全屏高度减去5像素。但是less之后的结果为95vh。明显是有问题的，在less.js的github上面也找到了类似的问题。less对于calc中的单位处理存在问题。可以理解为将上例中的100vh - 5px 处理成了 100vh - 5vh。注意新添加的~ 和 双引号！除了使用上面比较tricky的方法外，还可以通过升版本来解决。在v3.5.0-beta.2版本中作者对此问题进行了修复。
less等需要解禁height: calc(~ '100vh - 175px');
weixin_30664615的博客
05-29 492
height: calc(~ '100vh - 175px');//这样写才有用 转载于:https://www.cnblogs.com/cainiao-vcu/p/9104675.html
less对高宽的计算
热门推荐
peaceoncemore的专栏
03-21 1万+
  学习心得：    在css中有函数calc（）可以动态地计算不同比例的高度或宽度，比如    height: calc(100% - 30px);在css中表达正常，在less中出错，因为 less 本身就有 ‘减’ 这个操作，所以就违背了原意，所以在 less 中，要写成：    height: ~"calc(100% - 30px)";若要需要按照某个比例固定高度可以用    min-he...
less+vw+vh实现可视化大屏适配
m0_56023096的博客
12-15 874
【代码】less+vw+vh实现可视化大屏适配。
CSS使用calc()获取当前可视屏幕高度的实现
11-19
height: calc(100vh); } ``` 这里，`100vh`意味着div的高度将是视窗高度的100%，从而实现了全屏高度的效果。这种方法在某些场景下非常有用，比如创建全屏背景图像或全屏滚动效果。 然而，需要注意的是，`calc()`...
解决在css3中使用calc()无效的问题
爱码士的博客
04-13 4497
说明 在写前端的时候，需要根据页面高度自动调整高度，于是写了下面的代码。 .content { margin: 80px 20px 0; height: calc(~"100vh-133px"); background-color: white; } 运行后发现，无法编译。 解决 以上是less的写法，经过排查，需要在运算符号之间加空格即可。 .content...
Style笔记(css, stylus,less)
Ndbsa的博客
11-24 702
css，stylus，less各种语法记录
less变量计算
sinat_41747081的博客
09-29 2690
less中涉及到100%，100vh相关的表达式，需要用到calc,如果单纯less变量的加减乘除，可以不用calc，直接运算，如下面代码中所示。 common.less: @nav-height: 80px; @footer-height: 80px; content.less: @import "../common.less"; .content-wrapper { width: 100%...
css中100vh 加减运算
寬真
06-11 7124
vh/vwvh: 相对于视窗的高度, 视窗被均分为100单位的vh;vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;视区所指为浏览器内部的可视区域大小， 即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。 calc ca...
微信小程序——less 中使用calc
qq_43201350的博客
01-26 491
100vh表示屏幕高度 错误写法： height: calc(100vh - 90rpx); // 效果 height: 10vh; 正确写法： height: ~'calc(100vh - 90rpx)'; //效果 height: calc(100vh - 90rpx);
height: calc(100vh - 100px)；
fury的博客
09-30 3978
因此，这段代码的意思是将元素的高度设置为视窗高度减去100像素。这样，元素的高度会根据视窗大小自动调整，并且保留一定的空间（100像素）在顶部或底部。其中，vh是视窗的高度单位，表示相对于视窗高度的百分比，1vh等于视窗高度的1%。而px则是像素单位，表示具体的像素数值。这段代码是用来设置元素的高度。它使用了CSS的calc()函数来计算高度值，公式为100vh - 100px。
CSS `height: calc(100vh)；` Vs `height: 100vh；`
Joey3的博客
09-22 3139
VHheight: 100vh;表示该元素的高度等于视口高度的 100%。 例如：height: 50vh; 如果您的屏幕高度为 1000 像素，则您的元素高度将等于 500 像素（1000 像素的 50%）。 CALCheight: calc(100% - 100px);将使用元素的值来计算元素的大小。 例如：height: calc(100% - 100px);如果您的屏幕高度为 1000 像素，则您的元素高度将等于 900 像素（1000 像素的 100% 减去 100 像素）。 实例..
calc()函数 css中用100%的宽度/高度，减去50px？？
GoodIdea
12-23 1万+
做项目的时候常常用遇到下面这种情况： 要让B盒子占满 A盒子剩下的部分也就是黄框区域，这时候我们可以设置 B盒子 高为 100% 或者是100vh减去上面的 A盒子的高度50px。 只需设置样式使用calc() 函数，它支持 “+”, “-”, “*”, “/” 运算； 注意： 运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc...
less中使用calc计算高度注意事项
tinyVampire的博客
06-24 7161
文章目录lessss中使用calc计算高度注意事项参考 lessss中使用calc计算高度注意事项 我们知道，在css中我们可以使用100vh表示屏幕高度，我们还可以通过calc(expression)来动态计算宽高，于是便有了如下代码： height: calc(100vh - 50px); 然而事与愿违，我们得到的结果却是这样的： 我们得到的是50vh,相当于屏幕高度的一半。 google...
calc在Less中不生效的解决方法
weixin_39118782的博客
09-10 1598
calc在css文件中的正常写法 height: calc(100% - 44px); // 运算符前后都要有空格 然而在Less文件中这样写不生效，编译后的结果为height: 56%; 查其原因，是跟 Less 的语法冲突了，Less 把calc的参数当作运算式执行了。解决方式是使用 Less 的转义字符~，文档：https://github.com/SomMeri/less4j/wiki/Less-Language-Escaping 所以在Less文件中的写法应为： height: calc(~"1
less 变量 clac
最新发布
03-22
### 在 LESS 中使用变量配合 `calc` 函数实现动态计算 在 LESS 预处理器中，可以通过定义变量来存储数值或表达式，并将其与 CSS 的 `calc()` 函数结合使用以实现复杂的动态计算。然而，在实际应用过程中可能会遇到一些兼容性问题，比如 `calc()` 计算的结果未生效的情况[^1]。 #### 解决方案：将 `calc()` 表达式转换为字符串形式 当 `calc()` 函数与 LESS 插件一起使用时，如果直接书写 `calc(100% - 40px)` 类似的表达式可能导致解析错误或结果不生效。此时可以尝试将整个 `calc()` 表达式包裹在一个字符串中，并通过波浪号 (`~`) 转义处理： ```less @variable: 40px; height: ~"calc(100% - @{variable})"; ``` 上述代码片段中，`@{variable}` 是 LESS 的变量插值语法，用于将变量值嵌入到字符串中。这样能够有效避免因解析器冲突而导致的样式失效问题。 #### 注意事项 为了确保 `calc()` 函数正常工作，请遵循以下规则： - **运算符前后需留有空格**：例如 `width: calc(100% - @margin);` 如果缺少必要的空格，则可能引发浏览器无法识别该属性的问题[^2]。 - 支持四则基本运算操作符 `"+"`, `"-"`, `"*"`, `"/"` 并按照常规数学优先级执行计算逻辑。 另外值得注意的是，除了借助预处理器如LESS外，现代CSS本身也提供了强大的功能组合——即利用原生支持的 `var()` 和 `calc()` 来完成相似的任务而无需额外依赖其他工具链][^[^34]。下面是一个基于纯CSS的例子展示如何混合运用两者来进行布局调整: ```css :root { --top-height: 80px; } .container { height: calc(100vh - var(--top-height)); } ``` 此方式下定义了一个名为 `--top-height` 的根级别CSS变量，并且通过调用它参与到了容器高度的具体设定当中去[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值