使用计算calc

最新推荐文章于 2024-06-03 15:30:21 发布

梦想身高1米8

最新推荐文章于 2024-06-03 15:30:21 发布

阅读量163

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_43915401/article/details/109243213

版权

css 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

js中无法使用，操作符前后需要空格
1、less中使用
height: calc(~"100vh - 50px");
2、css中使用

<!DOCTYPE html>
<html>
    <head>
        <style>
            body{
                margin:0;
                height: 100vh;
            }
            div{
                background-color: gainsboro;
                height: calc(100% - 100px); //重点
            }
        </style>
    </head>
    <body>
        <div id='test' style="width: 100px"></div>
    </body>
</html>

在这里插入图片描述

3、内联样式中使用

<!DOCTYPE html>
<html>
    <head>
        <style>
            body{
                margin:0;
                height: 100vh;
            }
            div{
                background-color: dimgray;
            }
        </style>
    </head>
    <body>
        <div id='test' style="width: 100px;height: calc(100% - 100px)"></div> //重点
    </body>
</html>

梦想身高1米8

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用计算calc

js中无法使用less中使用height: calc(~"100vh - 50px");1、css中使用<!DOCTYPE html><html> <head> <style> body{ margin:0; height: 100vh; } div{ back
复制链接

扫一扫

专栏目录