前端 - css元素高度的布局问题?

Question

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

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

在css中，div的宽度默认独占一行，而高度需要手动设置。
上面的布局，box 高度 300
box1的高度未知，可能是100，可能是50
box2的高度如何占满余下空间？
如果box1高度为 100，那么box2高度应该是200，且不会受box2内部元素的高度影响。
如果box1高度为100且margin-bottom: 10px，那么box2高度应该为 190px。
如果box2上面有n个盒子，box2的高度应该是 box - n个盒子高度的余下值。
请问这种高度自适应的布局，各位是怎么实现的？有没有比较好的方法？

Answer 1

.box {
    height: 300px;
    display: grid;
    grid-template-rows: auto 1fr;
    border: 1px solid red;
    background: cyan;
}

.box1 {
    height: 100px;
    margin-bottom: 10px;
    background-color: blue;
}

.box2 {
    overflow: scroll; // 内部元素溢出滚动
    background-color: lightblue;
}

网格布局也可实现

Answer 2

用flex布局即可

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

Answer 3

要实现你描述的布局，即.box2的高度自适应以占据其父元素.box中除了.box1（以及可能的其他元素）之外的所有剩余空间，你可以使用几种不同的CSS布局方法。以下是两种常见的方法：

方法一：使用Flexbox

Flexbox 是一个现代的布局模式，它允许你轻松地设计复杂的布局结构，同时保证代码简洁且易于维护。

.box {
    height: 300px;
    background-color: red;
    display: flex;
    flex-direction: column; /* 默认即为 column，但为了明确可以写上 */
}

.box1 {
    /* 假设 height 为 100px */
    height: 100px;
    /* 如果需要 margin-bottom，直接在这里设置 */
    margin-bottom: 10px;
    /* 其他样式... */
}

.box2 {
    /* 使用 flex: 1; 来占据剩余空间 */
    flex: 1;
    /* 其他样式... */
}

方法二：使用CSS Grid

CSS Grid 也是一个现代的布局系统，它可以处理二维布局，非常适合设计复杂的页面布局。

.box {
    height: 300px;
    background-color: red;
    display: grid;
    grid-template-rows: auto 1fr; /* 第一行高度自适应，第二行占据剩余空间 */
    gap: 10px; /* 如果你需要在行之间添加间距，可以使用这个属性 */
}

.box1 {
    /* 假设 height 为 100px，但这里不需要明确设置，因为使用了 auto */
    /* 其他样式... */
}

.box2 {
    /* 在 Grid 布局中，1fr 代表剩余空间的一个分数单位 */
    /* 其他样式... */
}

注意：如果你需要考虑到.box内部有n个盒子，并且.box2要占据剩余空间，那么对于Flexbox，你只需要确保.box2是最后一个子元素，并给它设置flex: 1;。对于Grid，你可以使用repeat()函数来定义前面的n-1个行的高度，然后给.box2所在的行设置1fr。

这两种方法都允许你实现自适应高度，而不需要知道.box1的确切高度或内部元素的具体尺寸。同时，它们也提供了很大的灵活性来处理复杂的布局需求。