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>

相关阅读:
2023最新ELK日志平台（elasticsearch+logstash+kibana）搭建
JAVA便利店库存管理计算机毕业设计Mybatis+系统+数据库+调试部署
【PyTorch】PyTorch基础知识——自动求导
【译】.NET 7 中的性能改进（八）
算法通过村第六关-树青铜笔记|中序后序
C#中的委托
Maxwell 概述、安装、数据同步【一篇搞定】！
高分辨率相机成像效果就越好吗？
2023美团暑期实习自驾仿真算法一面面经
R语言应用中的bug

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