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

calc方法

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

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


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
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>

相关阅读:
猿创征文|13万字学会Spring+SpringMVC+Mybatis框架
软件测试技术之解析图灵测试离我们还有多远
yolov7增加mobileone
Jenkins 添加 Slave Agent 节点时报类文件不匹配错误
uvm白皮书练习_ch2_ch222加入factory机制
英国增加了新的化合物半导体集群
pytorch环境搭建(GPU)+Anaconda+CUDA+离线安装
基于 chinese-roberta-wwm-ext 微调训练中文命名实体识别任务
这次把怎么做好一个PPT讲清-审美篇
Vue太难啦！从入门到放弃day07——Vue前端工程化之Webpack

原文地址：https://blog.csdn.net/m0_54741495/article/details/133746251