less中使用calc计算高度注意事项

简介: less中使用calc计算高度注意事项

less中使用calc计算高度注意事项

我们知道,在css中我们可以使用100vh表示屏幕高度,我们还可以通过calc(expression)来动态计算宽高,于是便有了如下代码:

height: calc(100vh - 50px);

然而事与愿违,我们得到的结果却是这样的:

我们得到的是50vh,相当于屏幕高度的一半。

google一波,我们修改代码如下:

height: calc(~"100vh - 50px");

此时看效果,已然正常。

参考

https://stackoverflow.com/questions/42548630/css3-calc-minus-vh-with-pixel/42556033

相关文章
|
数据安全/隐私保护
1356:计算(calc)
1356:计算(calc)
194 0
|
Android开发
【RecyclerView】 十四、GridLayoutManager 网格布局管理器 ( GridLayoutManager.SpanSizeLookup 指定 item 元素占用网格个数 )
【RecyclerView】 十四、GridLayoutManager 网格布局管理器 ( GridLayoutManager.SpanSizeLookup 指定 item 元素占用网格个数 )
1384 0
【RecyclerView】 十四、GridLayoutManager 网格布局管理器 ( GridLayoutManager.SpanSizeLookup 指定 item 元素占用网格个数 )
|
JavaScript 容器 前端开发
js计算元素距离顶部的高度及元素是否在可视区判断
前言:   在业务当中,我们经常要计算元素的大小和元素在页面的位置信息。比如说,在一个滚动区域内,我要知道元素A是在可视区内,还是在隐藏内容区(滚动到外边看不到了)。有时还要进一步知道,元素是全部都显示在可视区,还是有部分在可视区部分在隐藏内容区。
5423 0
|
6月前
|
运维 安全 Serverless
函数计算产品使用问题之怎么调整单个服务下最大允许创建的函数个数
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
7月前
|
运维 Serverless 数据处理
函数计算产品使用问题之inpaint-anything 这个插件无法显示是什么原因
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
8月前
|
JavaScript Serverless
Vue 封装一个函数,小球原始高度不固定,弹起比例不固定、计算谈几次后,高度低于1米
Vue 封装一个函数,小球原始高度不固定,弹起比例不固定、计算谈几次后,高度低于1米
31 1
|
JavaScript 前端开发 安全
ES6(数值的扩展)
ES6(数值的扩展)
71 0
|
8月前
|
前端开发 Java C++
【面试题】calc()计算函数的作用和理解
【面试题】calc()计算函数的作用和理解
235 0
【面试题】calc()计算函数的作用和理解
|
8月前
|
算法 测试技术
class062 宽度优先遍历及其扩展【算法】
class062 宽度优先遍历及其扩展【算法】
55 0
|
前端开发 JavaScript 容器
overflow和动态计算高度
overflow和动态计算高度
83 0