Question

我想创建一个框，其中中间div的高度会发生变化以反映内容。中间内容将包含<li>，其高度可能会因页面而异。一个简单的图表：

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

问题是我需要第三部分始终具有全高度并允许内容流过它，然后使用中间部分填充多余部分。这是我目前的标记（其中1.固定为顶部，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;
}

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

1 个答案: