Looking through the css spec, it looks like width (of block level non-replaced elements in normal flow) is calculated based on the containing block's width, whereas height is calculated based on the descendant blocks. Thus it's easy to get a div to stretch out horizontally to fill it's containing block, but it's much more difficult to do the same vertically.
I have a div structure like this: <div class="container"> <div class="control-bar"> some controls here </div> <div class="content"> some content here </div> </div> The container is sizable by the user, and is its own block formatting context (its positioned absolutely). The control bar has a fixed height, zero margins, and auto width, so it expands horizontally to fill the container. The content also expands horizontally in the same manner. I want to get the content to expand vertically to fit the remaining area of the container. The closest I can come in css seems to be setting the height of content to 100%. However, since the control-bar also takes up vertical space, the content sticks out the bottom. Really what I'd like the height of content to be is 100% the height of the container, minus the height of control bar. Any suggestions on how to achieve this in css? Any misunderstandings on my part? Is the only way to solve this in javascript? Thanks, Brendan ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
