Question

I have an outer element that is a fixed size with a footer immediately below it. Inside the element are two sections; the first should be a fixed height and the second should expand to fill the other element but not overflow it.

Let me show you.

How do I do this? setting height: 100% on the second element causes it to oveflow the outer element and overrun the footer. The only other alternative I see is to se the height explicitly in pixels which seems like it would be a mess.

What’s the right way to do this?

Edit: setting overflow-y: hidden will work in this very limited example, but its not actually limiting section.inner2 and will look weird if for example I want to give section.inner2 a border-radius

Answer 1

The simplest solution that I can think of (and I don’t think very much) is just using position: absolute;: http://jsfiddle.net/WLZmT/3/.

HTML:

<div id="outer">
    <div id="fixed">
        Fixed.
    </div>
    <div id="fluid">
        Fluid.
    </div>
</div>

CSS:

#outer {
    position: relative;
    background: rgb(255, 200, 200);
    padding: 10px;

    height: 400px;
}

#fixed {
    height: 100px;
    padding: 10px;

    background: rgb(200, 255, 200);
}

#fluid {
    padding: 10px;
    background: rgb(200, 200, 255);

    position: absolute;
    top: 100px;
    bottom: 10px;
    left: 10px;
    right: 10px;
}