使用calc()调整元素高度或宽度

最新推荐文章于 2024-08-20 23:30:49 发布

以对_

最新推荐文章于 2024-08-20 23:30:49 发布

阅读量490

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/qq_44161722/article/details/132577395

版权

在这里插入图片描述

<style>
    .parent { 
        display: flex;
        padding: 0px 5px;
        width: 600px;
        height: 200px;
        background: #ccc;
    }
    .children { 
        margin: 10px 10px;
         /* 减去padding和margin */
        height: calc(100% - 20px);
        width: calc(100% - 30px);
        background: skyblue;
    }
 </style>

 <div class="parent">
    <div class="children">11</div>
    <div class="children">11</div>
    <div class="children">11</div>
 </div>

在上面增加一个盒子，发现刚才的方块多出去了
在这里插入图片描述

<style>
        .parent { 
            padding: 0px 5px;
            width: 600px;
            height: 200px;
            background: #ccc;
        }
        .top{
            width: 100%;
            height: 45px;
            background: greenyellow;
        }
        .children-box {
            display: flex;
            height: 100%;
        }
        .children { 
            margin: 10px 10px;
            height: calc(100% - 65px); /* 减去margin的同时减去其它元素的高度 */
            width: calc(100% - 30px);
            background: skyblue;
        }
    </style>

    <div class="parent">
        <div class="top">222</div>
        <div class="children-box">
            <div class="children">11</div>
            <div class="children">11</div>
            <div class="children">11</div>
        </div>
    </div>