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>

相关阅读:
mac配置双网卡 mac同时使用内网和外网
如何在h5和小程序中适配iphoneX及更高版本全面屏底部的安全区
如何让 useEffect 支持 async/await？
黑客常见攻击方法与防护方法
Qt中的UI文件介绍
2011年下半年系统架构设计师下午试卷 II
【2023华为杯A题】WLAN网络信道接入机制建模（代码、思路.....)
【Java八股文总结】之SpringBoot
欧拉路径！
使用IDEA让文本对比不在变的困难

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