css - 基于内容的中间容器的自动高度

Question

我想创建一个盒子，其中中间 div 的高度会发生变化以反映内容。中间内容将包含<li>'s，并且从一页到另一页的高度可能会有所不同。一个简单的图表：

[-- 1. fixed --]
[-- 2. flex  --]
|--    flex  --|
|--    flex  --|
[--    flex  --]
[-- 3. fixed --]

问题是我需要第三部分始终具有全高并允许内容流过它，然后使用中间部分填充多余的部分。这是我目前拥有的标记（其中 1. fixed 是顶部，2. 是中间，3. 是底部）：

<div class="box">
    <div class="top">
        <h4>Title</h4>
    </div>
    <div class="middle">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
    </div>
    <div class="bottom"></div>
</div>

和CSS

.top {
    background: url('/img/box_top.png') no-repeat;
    height: 10px;
}

.middle {
    background: #000;
}

.bottom {
    background: url('/img/box_fot.png') no-repeat;
    height: 150px;
}

让中间 div 根据内容调整其高度的最佳方法是什么？

Answer 1

在BillyMoat指出我最初问题中的缺陷后，我解决了问题。

我在底部添加了一个负边距以<div>匹配高度。

.bottom {
    background: url('/img/box_footer.png') no-repeat;
    margin: -150px 0 0px 0;
    height: 150px;
}