首页 > 其他分享 >calc()使用方法

calc()使用方法

时间:2022-11-10 14:02:41浏览次数:36  
标签:40px 解析 less 编译 使用 100vh calc 方法

在开发的过程中,常常会遇到头部高度是40px,而内容页是除去头部,占满视窗的整个高度,有时候是用js来处理,现在用css的calc是非常方便的:

.container{
    height: calc(100% - 40px); // 注:减号前后要有空格,否则很可能不生效!!
}

注意:如果用了CSS预处理器(less,scss)会被它们先解析,这是需要禁用解析 calc(~ '100vh - 64px') (less的写法)

calc(~ '100vh - 64px')

例:

使用less文件时,未禁用解析,会编译错误,如下:

代码:

编译:

修改之后:
代码:

编译:

这样子就编译正确啦~

标签:40px,解析,less,编译,使用,100vh,calc,方法
From: https://www.cnblogs.com/ZerlinM/p/16876812.html

相关文章

  • 使用 Kubeadm 部署 Kubernetes(K8S) 安装 -- 持久化存储(PV&PVC)
    使用Kubeadm部署Kubernetes(K8S)安装--持久化存储(NFS网络存储)NFS存在一个弊端,需要知道NFS服务器的地址,配在yaml中PV:持久化存储,对存储资源进行抽象,对外提供可......
  • vue v-for 使用
    html<divv-for="(item,index)informData.liuchengs":key="index"><el-form-itemlabel="流程:":prop="'liuchengs.'+index+'.no'":rules="{requ......
  • Vmvare ESXi 添加用户并分配使用虚拟机权限
    系统自带权限不是使用虚拟机就让输密码就是不能访问,索性自己创建了个角色分类。角色=权限分组创建用户添加用户导航器-主机-管理-安全和用户-用户-添加用户  密......
  • stm32单片机:使用串口下载程序。
    ①连接开发板USB转串口接口并上电。②通过MCUISP选定所下载的程序文件。③通过调帽连接p9—RXD,p10—TXD,Boot0=1(接3.3v),Boot1=0(接地GND)。④在mcuisp设置DTR低电平复位,RTS......
  • 使用 Kubeadm 部署 Kubernetes(K8S) 安装 -- 持久化存储(NFS网络存储)
    使用Kubeadm部署Kubernetes(K8S)安装Volume是Pod中能够被多个容器访问的共享目录。Kubernetes的Volume定义在Pod上,它被一个Pod中的多个容器挂载到具体的......
  • Java中的对象使用、局部变量与成员变量的区别
    对象的使用对象的使用格式创建对象:类名对象名=new类名();使用对象访问类中的成员:对象名.成员变量;对象名.成员方法();对象的使用格式举例:publicstatic......
  • UE代码重构方法
    代码重构开发过程中,需要对class、function、enum、variable改名,此处介绍如何处理。一、可以明确对象被少量引用父类修改:直接打开蓝图,然后在ClassSettings>ClassOp......
  • Java使用lamda表达式简化代码
    代码,自然写的越简洁越好啦,写的人舒服,看的人也舒服,一切为了高效。要把有限的时间花到其它有意思的事情上去。目的学习简化代码的思路,使用jdk8新特性lamada表达式。推理......
  • 论人类下一代语言的可能—7.3.2符号的揭示方法
    概念化的认知中,符号的使用主要是刻画概念间的关系。从现状来说,这种刻画是由逻辑、数学的应用带来的。从历史的角度,逻辑与数学则是在智力与符号使用共同演化的过程中发展起......
  • MyBatis-Plus 之selectMaps、selectObjs、selectCount、selectOne的使用
    转自:https://www.jb51.net/article/239792.htm 首先创建一个数据库表,如下图所示:然后创建一个SpringBoot项目,pom.xml和配置如下:1<?xmlversion="1.0"encoding="U......