Ok, lets say I've got a container div with some other stuff in it (such as a header, a fixed-height left column, a liquid height center column, and a right column that needs to fill the container div's height 100%). I need that div to fill the entire document height, because it's got borders on the side that need to touch from top to bottom.
Anyway, all the various methods I have tried generally either don't do any kind of height management, or will set the div height to the height of the user's window size (So, if they have a browser window with a page-area size of 1000, the div height would come out 1000) - another interesting issue is that the right column would come out the same size as the container div, and extend out of it (so, using our previous example, it would be 1000 too, and extends out beyond the container div because the header takes up the full width of the container div).
If you need to see a visual, you can see what is going on at <!-- m --><a class="postlink" href="http://creativity.the-engine.org/concepts/fastone1/">http://creativity.the-engine.org/concepts/fastone1/</a><!-- m --> (note: I do my testing in Firefox).
Also, just want to throw out a thanks to everybody on this forum. This place is a great resource
#yourdiv {
position: absolute;
height: 100%;
top: 0; bottom: 0;
}
Try that. You might have to reduce the height to 99% or 98% so there's no scrollbar (because of the borders increasing the height).Nope, no worky.You'll want to read up on Faux Columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->). That should get you what you want.Well, I just broke down and did a cheap hack by doing print screen, and making a background image for the borders...
And, just read faux-columns, so yeah, I had the right idea
Is there any clues on whether or not this will be "fixed" in CSS 3?I doubt it. I'm VERY tempted to write the W3C and start working on a draft of some sort to create a grid work-type layout, similar to tables, but without the additional processor overhead and semantics that go along with tables. I feel your pain. This is the one thing that CSS is missing, and it's a big thing.<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins">http://www.w3.org/TR/CSS21/visudet.html ... nd_margins</a><!-- m -->
Anyway, all the various methods I have tried generally either don't do any kind of height management, or will set the div height to the height of the user's window size (So, if they have a browser window with a page-area size of 1000, the div height would come out 1000) - another interesting issue is that the right column would come out the same size as the container div, and extend out of it (so, using our previous example, it would be 1000 too, and extends out beyond the container div because the header takes up the full width of the container div).
If you need to see a visual, you can see what is going on at <!-- m --><a class="postlink" href="http://creativity.the-engine.org/concepts/fastone1/">http://creativity.the-engine.org/concepts/fastone1/</a><!-- m --> (note: I do my testing in Firefox).
Also, just want to throw out a thanks to everybody on this forum. This place is a great resource
#yourdiv {position: absolute;
height: 100%;
top: 0; bottom: 0;
}
Try that. You might have to reduce the height to 99% or 98% so there's no scrollbar (because of the borders increasing the height).Nope, no worky.You'll want to read up on Faux Columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->). That should get you what you want.Well, I just broke down and did a cheap hack by doing print screen, and making a background image for the borders...
And, just read faux-columns, so yeah, I had the right idea
Is there any clues on whether or not this will be "fixed" in CSS 3?I doubt it. I'm VERY tempted to write the W3C and start working on a draft of some sort to create a grid work-type layout, similar to tables, but without the additional processor overhead and semantics that go along with tables. I feel your pain. This is the one thing that CSS is missing, and it's a big thing.<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins">http://www.w3.org/TR/CSS21/visudet.html ... nd_margins</a><!-- m -->