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>

相关阅读:
vue的混入mixin拙见
Linux ps 命令使用介绍
第十章开源许可证
【FPGA】串口以命令控制温度采集
1855. 下标对中的最大距离
个人所思所想录
网络赚钱项目 - 虚拟项目如何选择产品
C++11 list::splice()函数的使用
Lua语法入门
Mybatis框架源码笔记(一)之编译Mybatis源码和源码调试环境准备

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