2 replies [Last post]
mlb
Offline
newbie
Last seen: 12 years 9 weeks ago
Joined: 2008-06-05
Posts: 4
Points: 0

I have two divs I'd like to position vertically, div1 above div2. I'd like the sum of their heights to be 100% of the height of their containing block. I can do this in IE using the 'expression' function in css. "height: expression(document.body.clientHeight - document.documentElement.clientTop)".

I'd like to do this in a standards compliant way that will also work on Firefox, etc. Does anyone have an idea if this is possible without using the ugly css/javascript hack I'm currently using?

Thanks.

Attached is a Diagram of what I'd like it to look like.

Sample Code:



Two Div Test Layout Page

html, body{
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}

#div1{ background: green;
height: ???;
}

#div2{ background: blue;
height: ???;
overflow: auto;
}




Div 1


Div 2

  • Item 01

  • Item 02

  • Item 03

  • Item 04

  • Item 05

  • Item 06

  • Item 07

  • Item 08

  • Item 09

  • Item 10


....

AttachmentSize
2div.GIF2.49 KB
Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Do you mean something like:

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

mlb
Offline
newbie
Last seen: 12 years 9 weeks ago
Joined: 2008-06-05
Posts: 4
Points: 0

Thanks for the reply. Yes,

Thanks for the reply. Yes, what I'm trying to do is very to close to that example. The difference (and my problem) is that I don't know the height of the header. In the example it's set to 60px. I'm banging my head against the wall because for overflow:auto to work the div must have a set height. I can make that work in IE using expression and calculating the height on the fly, but that's just a partial solution since it doesn't apply to Firefox.

To give a little more insight into my issue I need to display an article inside a fixed height block. The article has two parts, a header with article details and an article body. I need the details to remain static while the body is scrollable. The header will normally be ~75px or so but depending on the amount of details provided could become taller, thus I can't give it a set pixel or percentage height.

Perhaps I'm going about the problem wrong, should I be wrapping the divs differently or using a table? It seems like somebody would’ve faced a problem like this before.

btw: i love the pmob example site, i’ve used it many times before.