CSS: Non-discrete min-height in relation to parent, but also able to expand parent

Question

I tried asking this earlier but judging by the down-votes and snarky comments, I didn't make my question clear enough. So I'll have another shot. With pictures and stuff.

I have a simple page with 4 main elements: a header, footer and middle, all contained in a wrapper. The wrapper should be 100% of screen height at a minimum. The footer is sticky- permanently stuck at the bottom of the wrapper. The header is always in the same position.

The tricky part is the middle; I want it to always span the full space between header and footer, but, if required, to also push the wrapper to expand beyond its minimum height.

Here is an illustration of my question: enter image description here

And jsfiddle.

The only method I can think of is to use the css calc method, but it is far too unreliable. Can anyone suggest a better way to achieve this please.

EDIT:

The green shown in the illustration is the middle div, not the wrapper showing through. ie. I specifically need the middle div to always span the full gap between header and footer.

Can you rearrange so the header and footer are *inside* the middle `div`? Then you could just `position: absolute` the header and footer with the middle having a `min-height: 100%`. — willoller, Oct 21 '13 at 22:31
also this: http://stackoverflow.com/questions/8264499/css-min-height-100-with-multiple-divs?rq=1 — willoller, Oct 21 '13 at 22:32
Hi, willower, many thanks for your efforts- I think the question you linked to pretty much answers my question- or as close to it as I will get. There's a few more complications, but hopefully I can implement the display:table & display:table-row properties as a solution. Cheers. — Inigo, Oct 22 '13 at 10:06

score 0 · Answer 1 · edited May 23 '17 at 10:31

Based on http://ryanfait.com/sticky-footer/, you could use

HTML:

<div id="wrapper">
    <div id="header">
        Header
    </div>
    <div id="middle">
        Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle
    </div>
    <div id="push"></div>
</div>
<div id="footer">
    Footer
</div>

CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
#footer, #push {
    height: 4em;
}

Demo

If you don't want to have a semantically incorrect #push element, you could use :after (see http://css-tricks.com/snippets/css/sticky-footer/), but won't work on old browsers.

If you really need the middle div to fill all the space, you could use floating elements:

HTML:

<div id="header">
    Header
</div>
<div id="middle">
    Middle begin<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle<br />Middle end
    <div id="push"></div>
</div>
<div id="footer">
    Footer
</div>

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
#header {
    float: left;
    width: 100%;
}
#middle {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
#footer, #push {
    height: 4em;
    clear: both;
}

Demo: http://jsfiddle.net/C43ZJ/2/

Be aware it doesn't work on IE7, because min-height: 100% triggers hasLayout , and then #middle clears the floating #header (see How to stop IE7 clearing floats because of hasLayout).

Hi, Oriol, thanks for your reply. I am aware of this sticky-footer technique, however, I specifically need the middle div to always span the full space between header and footer, which this fails to to do. See update: http://jsfiddle.net/Inigo/C43ZJ/1/ (added yellow color to middle) — Inigo, Oct 21 '13 at 22:09

CSS: Non-discrete min-height in relation to parent, but also able to expand parent

1 Answers1