Question

I would like to create a box where the height of the middle div changes to reflect the content. The middle content will contain <li>‘s and it might vary in height from one page to the other. A simple diagram:

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

The problem is I need the third section to always have full height and allow the content to flow over it, then use the middle section to pad out the excess. This is the markup I have at the moment (where 1. fixed is top, 2. is middle and 3. is bottom):

<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>

and the 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;
}

What’s the best way of getting the middle div to adjust it’s height depending on content?

Answer 1

After BillyMoat pointed out the flaw in my original question, I worked it out.

I have added a negative margin to the bottom <div> to match the height.

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