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!

score 5 · Accepted Answer · answered Mar 24 '11 at 16:59

5

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
}

answered Mar 24 '11 at 16:59

thirtydot

224,678
48
389
349

THANK YOU! This service is the best! Wonder why I never did this before! – Richard Mar 25 '11 at 09:17
Do you need IE7 support? As I just noticed from @clairesuzy's answer, mine doesn't work in IE7. I'm sure it can be made to do so with a few tweaks, if you like. – thirtydot Mar 25 '11 at 10:36

score 1 · Answer 2 · answered Mar 24 '11 at 17:26

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%;

score 0 · Answer 3 · answered Mar 24 '11 at 13:13

0

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.

answered Mar 24 '11 at 13:13

Robik

6,047
4
31
41

Beacuse you are new, if this have worked please accept this answer. – Robik Mar 24 '11 at 13:22
Hi, sorry, obviously not clear enough :) The problem is that this one wont adjust be the right height in proportion to the iHeader. The inner height 1000px is only to test the scroller. In addition the iWrapper is already overflow:auto; – Richard Mar 24 '11 at 14:08

Two vertical divs within a 100% height div

3 Answers3

Linked