html - 如何创建一个子 div 来填充固定高度的父 div 中剩余的垂直空间？

Question

我有一个设置为 480 像素高的父 div。它有两个子项，它们都有动态填充 AJAX 的内容，所以我不知道它们最终会达到多高。最上面的 child 充当标题，我需要显示所有信息，但第二个 child 只会有一个长长的列表，其中会溢出:auto;。有没有办法让第二个 child 只填满第一个 child 没有使用的剩余空间？

<div id = "parent">
    <div id = "child1" >
        <h2>Header</h2>
        <p>Paragraph. I don't know ho long it will be.</p>
    </div>
    <div id = "child2" >
        <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>etc...</li>
        </ul>
    </div>
</div>

#parent {
    background-color: cornflowerblue;
    max-width: 700px;
    height: 480px;
    margin: 0 auto;
    text-align: center;
    padding: 5px;
}
#child2 {
    height: 150px;
    overflow: auto;
}
#child2 ul {
    list-style: none;
    margin: 0;
    padding 0;
}

环顾四周，我发现了一些解决方案，它们有点接近我的需要，但并不完全正确。例如this问题有一个很好的解决方案，但要求第一个 child 的高度是固定的。 This one更接近但仍然不好，出于同样的原因。甚至有办法解决这个问题吗？

Answer 1

看起来你已经没问题了，因为两个 child 都会得到内容，第一个会根据需要填充，第二个会在触发溢出时填充其余内容。只需删除第二个 child 的 height: 150px;。