3 stacked divs with min-height

Question

I've been scratching my head while thinking about this issue. I have 3 divs. The top and bottom div have a min-height, the middle div has unknown height (expands by content) but should be centered in the page. The top and bottom div should then fill up the remaining top and bottom space.

http://oi43.tinypic.com/5lb3v5.jpg

I'd like to have a pure HTML/CSS solution. Refactoring the HTML structure is possible..

Thanks

Current HTML structure:

<div id="page">
  <div id="top">top div</div
  <div id="middle">middle div</div>
  <div id="bottom">bottom div</div>
</div>

And CSS:

#page {
  min-height: 100%;
  height: 100%;
  width: 100%;
}
#top, #bottom {
  min-height: 17.5%;
  height: auto !important; /* Set height to content height but keep it minimum 17.5% */
  height: 17.5%; /* Some IE don't understand min-height... */
  width: 100%;
}
#middle {
  height: auto;
  width: 100%;
}

Can you try use some existing layout? For example http://peterned.home.xs4all.nl/examples/csslayout1.html or http://layouts.ironmyers.com/100_percent_Layouts/ — kubedan, May 22 '13 at 07:47
The first link has it's main container extending to the bottom; I'd like to get the opposite (bottom extending to main). The second link is for columns. — Propaganistas, May 22 '13 at 14:30

score 0 · Answer 1 · answered May 22 '13 at 08:54

You can use Jquery for that, like this: http://jsfiddle.net/rebeen/8YVzb/

Html:

<div id="page">
  <div id="top">top div</div>
  <div id="middle">middle div</div>
  <div id="bottom">bottom div</div>
</div>

Css:

#page {
 min-height: 300px;
}
#top, #bottom {
  background: #000;
  min-height: 17.5%;
  width: 100%;
}
#middle {
 background:#555;
  height: auto;
  width: 100%;
}

Jquery:

$(function(){
    var pageHeight = $('#page').height();
    var topHeight = $('#top').height();
    var bottomHeight = $('#bottom').height();
    var middleHeight = $('#middle').height();
    if(middleHeight > (pageHeight-(topHeight+bottomHeight)))
        $('#middle').css(height, 'auto');
    else
        $('#top, #bottom').height((pageHeight-middleHeight)/2);
})

Although the jQuery method will always work, I'd like to implement an approach solely with CSS... — Propaganistas, May 22 '13 at 14:29

score 0 · Answer 2 · answered May 22 '13 at 09:02

The easiest way I see is table display but it depends on wich browser you have to support (http://caniuse.com/#feat=css-table).

http://jsfiddle.net/NukYE/

body,
html {
  height: 100%;
}
#page {
  display: table;
  min-height: 100%;
  height: 100%;
  width: 100%;
}
#top, #bottom {
  display: table-row;
  min-height: 17.5%;
  height: auto !important; /* Set height to content height but keep it minimum 17.5% */
  height: 17.5%; /* Some IE don't understand min-height... */
  width: 100%;
}
#middle {
  display: table-row;
  height: auto;
  width: 100%;
}

If using this, the middle row extends its height until the bottom div is reached. However I need the opposite: top AND bottom div should fill up the space that's unused by the middle row. — Propaganistas, May 22 '13 at 14:13

3 stacked divs with min-height

2 Answers2