Welcome To Ask or Share your Answers For Others

一个父元素有两个子元素上下排列，怎么使下面的子元素撑满父元素剩余高度？

asked Jan 27, 2021 in Technique[技术] by 深蓝 (71.8m points)

一个父元素有两个子元素上下排列，怎么使下面的子元素撑满父元素剩余高度？

由于上面的子元素有高度，下面的子元素会被上面的元素挤出父元素的范围。

    <style>
        .a {
            height: 100px;
            width: 100px;
        }
        .b {
            height: 10px;
            width: 10px;
        }
        .c {
            height: 100%;
            width: 100%;
            background-color: red;
        }
    </style>
</head>
<body>
   <div class="a">
       <div class="b"></div>
       <div class="c"></div>
   </div>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

Welcome To Ask or Share your Answers For Others

1 Answer

answered Jan 27, 2021 by 深蓝 (71.8m points)

.a {
    display: flex;
    flex-direction: column;
    height: 100px;
    width: 100px;
}
.b {
    height: 10px;
    width: 10px;
}
.c {
    flex: 1;
    width: 100%;
    background-color: red;
}

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

...