如何让 CSS 中的元素高度自适应填充剩余空间？

如何让 CSS 中的元素高度自适应填充剩余空间？插图

如何实现元素高度的自适应布局？

在 html 中，元素的宽度默认是独占一行的。而高度需要手动设置。因此，如何在 css 中实现元素高度的自适应布局呢？

考虑以下布局：

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

登录后复制

.box {
    height: 300px;
    background-color: red;
}

登录后复制

在这个布局中，box 的高度为 300px，而 box1 的高度可能是 100px 或 50px。如何让 box2 的高度占满剩余的空间？

立即学习“”；

一种解决方案是使用 flex 布局：

.box {
    display: flex;
    flex-direction: column;
}
.box2{
    flex: 1;
}

登录后复制

这将使 box2 具有 1 的 flex 值，这意味着它将占满 box 剩余的高度，无论 box1 的高度如何。

如果 box1 有 margin-bottom，那么 box2 的高度将减少 margin-bottom 的值。

对于有 n 个盒子的情况，box2 的高度将是 box 减去 n 个盒子高度的剩余值。

以上就是如何让 CSS 中的元素高度自适应填充剩余空间？的详细内容，更多请关注米云其它相关文章！

近期文章