calc方法和vue中calc不生效踩坑

calc方法

calc()方法是css用来计算的,比如一个场景,上下固定高度,中间自适应,就可以使用这个方法。

预编译less也是可以使用这个方法的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>body{margin: 0 !important;}header{height: 100px;background: red;}.box{height:calc(100vh - 200px);background: pink;}footer{height: 100px;background: green;}
</style>
<body><header></header><div class="box"></div><footer></footer>
</body>
</html>

效果如下:

坑点:

在vue文件中,如果style标签中设置了less,那么直接写calc就不会生效,必须用下面的语法才行

<style lang="less">.box{height:calc(~"100vh - 200px")}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/99827.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

链表(7.27)

3.3 链表的实现 3.3.1头插 原理图&#xff1a; newnode为新创建的节点 实现&#xff1a; //头插 //让新节点指向原来的头指针&#xff08;节点&#xff09;&#xff0c;即新节点位于开头 newnode->next plist; //再让头指针&#xff08;节点&#xff09;指向新节点&#…

插入排序/折半插入排序

插入排序/折半插入排序 插入排序 插入排序(英语&#xff1a;Insertion Sort)是一种简单直观的排序算法。它的工作原理是通过构建有序序列&#xff0c;对于未排序数据&#xff0c;在已排序序列中从后向前扫描&#xff0c;找到相应位置并插入。插入排序在实现上&#xff0c;通常…

盲盒商城源码 盲盒开箱源码 潮物盲盒商城源码 仿CSGO盲盒开箱源码

百度seo的要求对于网页内容的伪原创是相对严格的,需要进行一定的修改使其符合百度seo的标准 根据您的要求,我们将对后面的这段话进行伪原创修改,只修改文字符号,不对字数进行调整: 盲盒商城源码、盲盒开箱源码、潮物盲盒商城源码、仿CSGO盲盒开箱源码 带有Vue源代码,前端…

AF_UNIX和127.0.0.1(AF_INET)回环地址写数据速度对比

在linux下&#xff0c;存在着这样的情况&#xff0c;本地的进程间通信&#xff0c;并且其中一个是服务端&#xff0c;另外的都是客户端。 服务端通过绑定端口&#xff0c;客户端往127.0.0.1的对应端口发送&#xff0c;即可办到&#xff0c;不过这样会浪费一个端口&#xff0c;同…

如何实现MySQL的增删改查

MySQL是一种关系型数据库管理系统&#xff0c;提供了增删改查&#xff08;CRUD&#xff09;操作来管理数据库中的数据。下面是一些关于MySQL的增删改查的简要说明&#xff1a; 增加&#xff08;Create&#xff09;: 使用INSERT语句向数据库表中插入新的数据行。语法如下&#x…

git常用命令和开发常用场景

git命令 git init 创建一个空的git仓库或者重新初始化已有仓库 git clone [url] 将存储库克隆到新目录 git add 添加内容到索引 git status 显示工作树状态 git commit -m "" 记录仓库的修改 git reset 重置当前HEAD到指定的状态 git reset –-soft&#xff1a;…

2020架构真题(四十六)

、以下关于操作系统微内核架构特征的说法&#xff0c;不正确的是&#xff08;&#xff09;。 微内核的系统结构清晰&#xff0c;利于协作开发微内核代码量少&#xff0c;系统具有良好的可移植性微内核有良好的的伸缩性和扩展性微内核功能代码可以互相调用&#xff0c;性能很高…

3款国产办公软件,不仅好用,还支持linux国产操作系统

当提到国产办公软件并支持Linux国产操作系统时&#xff0c;以下是三款备受好评的软件&#xff1a; 1. WPS Office&#xff08;金山办公套件&#xff09; WPS Office是中国知名的办公软件套件&#xff0c;也是一款跨平台的应用程序。它包含文字处理、表格编辑和演示文稿等常见办…

06-进程间通信

学习目标 熟练使用pipe进行父子进程间通信熟练使用pipe进行兄弟进程间通信熟练使用fifo进行无血缘关系的进程间通信使用mmap进行有血缘关系的进程间通信使用mmap进行无血缘关系的进程间通信 2 进程间通信相关概念 2.1 什么是进程间通信 Linux环境下&#xff0c;进程地址空间…

STM32F030在使用内部参考电压 (VREFINT)时与STM32G070的区别

背景&#xff1a; 之前使用过STM32G070的内部参考电压来提升ADC采集的准确度&#xff08;STM32使用内部参考电压提高ADC采集准确度&#xff09;&#xff0c;所以本次使用STM32F030的芯片时直接把之前G070的代码拿过来用了&#xff0c;但是出现了问题。 查找资料发现两者不同&am…

STM32CubeMX学习笔记-USART_DMA

STM32CubeMX学习笔记-USART_DMA 一、DMA的概念二、数据传输方式普通模式循环模式 三、以串口方式讲解串口DMA方式发送函数&#xff1a;HAL_UART_Transmit_DMA串口DMA方式接收函数&#xff1a;HAL_UART_Receive_DMA获取未传输数据个数函数&#xff1a;__HAL_DMA_GET_COUNTER关闭…

解析navicate数据库密码

在线运行地址:代码在线运行 - 在线工具 <?php class NavicatPassword {protected $version 0;protected $aesKey libcckeylibcckey;protected $aesIv libcciv libcciv ;protected $blowString 3DC5CA39;protected $blowKey null;protected $blowIv null;public func…

spring boot整合Minio

MinIO 安装MinIo # 先创建minio 文件存放的位置 mkdir -p /opt/docker/minio/data# 启动并指定端口 docker run \-p 9000:9000 \-p 5001:5001 \--name minio \-v /opt/docker/minio/data:/data \-e "MINIO_ROOT_USERminioadmin" \-e "MINIO_ROOT_PASSWORDmini…

如何在Apache和Resin环境中实现HTTP到HTTPS的自动跳转:一次全面的探讨与实践

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

【MySQL】基本查询(二)

文章目录 一. 结果排序二. 筛选分页结果三. Update四. Delete五. 截断表六. 插入查询结果结束语 操作如下表 //创建表结构 mysql> create table exam_result(-> id int unsigned primary key auto_increment,-> name varchar(20) not null comment 同学姓名,-> chi…

PHP知识大全

PHP知识大全 1. 变量如何定义&#xff1f;如何检查变量是否定义&#xff1f;如何删除一个变量&#xff1f;怎样检测变量是否设置&#xff1f; $定义 isset()// 检测变量是否设置 defined&#xff08;&#xff09;// 检测常量是否设置unset()//销毁指定的变量 empty()// 检测…

解决yolo无法指定显卡的问题,实测v5、v7、v8有效

方法1 基本上这个就能解决了&#xff01;&#xff01;&#xff01; 在train.py的最上方加上下面这两行&#xff0c;注意是最上面&#xff0c;其次指定的就是你要使用的显卡 import os os.environ[CUDA_VISIBLE_DEVICES]6方法2&#xff1a; **问题&#xff1a;**命令行参数指…

<html dir=ltr>是什么意思?

<html dirltr>的意思是&#xff1a; 文字默认从左到右排列 说明&#xff1a; HTML--超级文本标记语言 dir 属性 -- (文字的)排列方式属性 取值&#xff1a; ltr -- 代表左到右的排列方式 rtl -- 代表右到左的排列方式 默认值:ltr 示例&#xff1a; ltr左到右的对…

C#:出题并判断

C#:出题并判断 //出题并判断 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms;namespace Test_…

# 解析Pikachu靶场:一个安全研究的练习场

引言 Pikachu靶场是一个非常流行的安全研究和渗透测试练习平台。这个环境包括多个安全漏洞&#xff0c;从基础的到高级的&#xff0c;供安全研究人员和渗透测试者进行实验和学习。在这篇博客中&#xff0c;我们将探讨Pikachu靶场的基本概念&#xff0c;功能&#xff0c;以及如…