Two vertical divs within a 100% height div

Question

Sorry for my bad english, hope you will understand my issue.

I'm turning my head around a problem that I know I've been solving once before. The issue is that I need two DIVs inside a div where one of the DIVs has a given height and the other one fills up the rest of the parent div height. The problem is that the second div (with no defined height, or 100% height) needs to be overflow-able with an vertical Scroller. All this is to make an "outlook" lookalike windowsetup where you operate a list on the left and an actionwindow on the right. The left list needs a header where you can limit the list as well as search.

Have a look at http://kokongcrm0.server111.wdc.webdeal.no/index-test.php to find an example of the issue.

All help is good help (!) Thanx in advance. I would be so glad if someone could help!

Answer 1

Use position: relative combined with position: absolute.

Live Demo

Get rid of these last two lines:

div#iHeader { height:50px; background:#009900; }
div#iWrapper  { height:100%; padding-top:-50px; padding-bottom:-150px; overflow:auto; }

Replace them with:

div#list {
    position: relative
}
div#iHeader {
    height:50px; background:#009900;

    width: 100%;
    position: absolute;
    top: 0;
    left: 0
}
div#iWrapper { 
    overflow:auto;

    width: 100%;
    position: absolute;
    top: 50px;
    left: 0;
    bottom: 0
}

Answer 2

here's a slightly different way to do it so you don't need to use the top and bottom co-ordinates together - that way it can be made to work in IE7 too

(this does involve putting IE6/7 into Quirks mode though, but if it's any use see the comment before the Doctype how to do that)

JSBIN - IE7 compatible version

This is the quite similar to thirtydots, in that it uses a mixture of relative and absolute, but this method uses the border-box box-sizing model so space can be created by padding and still maintain the use of height: 100%;

Answer 3

Delete that 1k Height div, and make this iWrapper ver flow auto. So change this:

<div id="iWrapper">
  <div style="height:1000px;">
    test test
  </div>
</div>

to this:

<div id="iWrapper" style="overflow: auto;">
    test test
</div>

Or add it to your stylesheet.