Tricky box layout with sticky footer and flexible heights

Question

I am working on a layout that is placed into a wrapper with a fixed height and contains three inner containers.

The first container (header) should be placed on top within the wrapper and is flexible in it's height.

The second container (content) is flexible in it's height as well and need to overflow if the available space is not sufficient (overflow-y: auto).

The third container (footer) also has an unknown height and needs to be placed at the bottom of the wrapper at any time.

<div id="wrapper">
    <div id="header">
        <span>
            some unknown content that is placed at the top of the wrapper
        </span>
    </div>
    <div id="content">
        <span>
            some more unknown content and within here we want
            to enable vertical scrolling if necessary
        </span>
    </div>
    <div id="footer">
        <span>
            again unknown content that should be placed at the bottom of
            the wrapper at any time
        </span>
    </div>
</div>

The options I have ruled out so far:

absolute positioning of the footer within the relative positioned wrapper: doesn't work in this case since we don't know the footer's height
flexbox model: not possible since I need to support IE8+
table: the content row doesn't overflow, the complete table would overflow and the footer would be positioned outside of the wrapper
table with the content td element's position set to relative and including a div element with position set to absolute (containing the actual content): seems to fix the overflow issue in most browsers, but e.g. in IE9 the content div (with height set to 100%) results in a height of 0

Is there any other option without using Javascript that might work here?

Explain to me why the footer can't be positioning absolute? Height has nothing to do with this. Here take a look at [this](http://jsfiddle.net/Pcfnh/) — nkmol, Nov 07 '13 at 20:45
@nkmol Because the final "visible" height of the content must be the height of the wrapper minus the header and footer. — TreeTree, Nov 07 '13 at 20:47
Something like this could potentially work for IE8-9, but it absolutely fails in Firefox: http://cssdeck.com/labs/tgzwwp6c — cimmanon, Nov 07 '13 at 20:59

score 1 · Answer 1 · answered Nov 08 '13 at 14:27

1

It took a while but I believe this is it, I adapted it from my answer to another question. The .inner div must have height:100% but anything inside it should be able to be modified however you want.

http://jsfiddle.net/Z4K7J/2/

.left {
    border:1px solid orange;
    width:200px;
    height:300px;
    display:table;
}

.top {
    display:table-row;
}

.middle {
    display:table-row;
    height:100%;
}

.middle .inner {
    background-color:red;
    height:100%;
    overflow-y:auto;
}

.bottom {
    display:table-row;
}

answered Nov 08 '13 at 14:27

TreeTree

3,200
3
27
39

Thanks for your effort. But this unfortunately doesn't work in Firefox and IE 8-11. Within those browsers, the `.left` container increases in height when the height of the `.middle .inner` container exceeds the available space. – skulli Nov 08 '13 at 15:07
Ah sorry about that. I mostly fiddle in Chrome and I guess Chrome had a funny edge case. Should have checked in others. – TreeTree Nov 08 '13 at 15:25

Tricky box layout with sticky footer and flexible heights

1 Answers1