需求:父元素高度按需求设置;

​ 子元素自动填满父元素的剩余部分;

初始样式:

div自动填满剩余部分(等高布局)

初始代码:

HTML部分

<div class="father">
    父元素
    <div class="children">子元素</div>
</div>

CSS样式部分

.father{
    height: 500px;
    width: 500px;
    background: #3cb034;
}
.children{
    background: #0000FF;
}

修改后:

div自动填满剩余部分(等高布局)

HTML部分不变

CSS部分

.father{
    height: 500px;
    width: 500px;
    background: #3cb034;
    overflow: hidden;
}
.children{
    background: #0000FF;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}

相关文章: