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>

相关阅读:
SSH登陆无权限
一文搞懂百度强推的Redis天花板笔记，原来数据库是这样理解的
Java设计模式之解释器模式
1.16.C++项目：仿muduo库实现并发服务器之HttpContext以及HttpServer模块的设计
平台登录页面实现（一）
odoo17 web.assets_web.min.js 赏析
关于放大器失真的原因你了解多少呢？
HTML5新特性以及主体构成
mapbox 导航记录(release-v2.15分支纯kotlin)
【机器学习】特征工程：特征预处理，归一化、标准化、处理缺失值

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