css中使用calc 函数计算元素宽高值

2021-03-24

阅读：74

calc函数的定义与用法

calc() 函数用于动态计算长度值

注意事项

运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)

任何长度值都可以使用calc()函数进行计算

calc()函数支持 "+", "-", "*", "/" 运算

calc()函数使用标准的数学运算优先级规则

使用场景

例如，我们需要动态计算某个元素的高度动态计算除header部分剩余浏览器窗口高度，以及内容区域宽度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            header{
                height: 80px;
                background: blue;
            }
            aside{
                width: 180px;
                height: calc(100vh - 80px);
                background: bisque;

            }
        </style>
    </head>
    <body>
        <header>
            头部
        </header>
        <aside>
            侧边栏
        </aside>
    </body>
</html>

QQ截图20210324222700.png

搜索一下

加入前端e栈