Question

我有一个设置为480px高的父div。它有两个孩子都有动态填充AJAX的内容，所以我不知道他们最终会有多高。顶级子节点作为标题，我需要显示所有信息，但第二个子节点只有一个长列表，它将有溢出：auto;。是否有办法让第二个孩子填补第一个孩子没有使用的其余空间？

<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问题有一个很好的解决方案，但要求第一个孩子是一个固定的高度。出于同样的原因，This one更接近但仍然没有好处。有没有办法解决这个问题？

Answer 1

好像你已经可以了，因为因为两个孩子都会获得内容，第一个将填充所需的内容，第二个将填充剩余的溢出触发。只需从第二个孩子中删除height: 150px;。

Answer 2

最后我更改了它，而不是根据内容动态设置高度，我只是在代码中设置高度。它只在一个地方，所以手动使用它并不是那么糟糕。

Answer 3

看一下Flexbox

这可以通过以下css简单地完成：

#parent {
    display: flex;
    flex-flow: column nowrap;
}
#child1 {
    flex: 0 0 auto;
}
#child2 {
    flex: 1 1 auto;
}

告诉家长将其孩子安排在一个栏目中。
告诉第一个孩子要占用他想要的空间;不多也不少。
告诉第二个孩子扩大或缩小以适应剩余的空间。

Demo

可以找到Flexbox的一个很好的概述here。

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

3 个答案:

看一下Flexbox