Mon, 2008-06-09 16:27
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
....
| Attachment | Size |
|---|---|
| 2div.GIF | 2.49 KB |
Tue, 2008-06-10 02:16
#1
Do you mean something like:
Do you mean something like: http://www.pmob.co.uk/temp/fixedlayoutexample8.htm
Tue, 2008-06-10 13:28
#2
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.