Pure CSS minimized-height header, maximized-height body within an absolutely positioned DIV

Question

I have an HTML editor widget that I want to appear within an absolutely positioned, fixed-size DIV. However, I don't know the absolute size of the DIV beforehand, and it may change, like if the user resizes the window.

The editor, naturally, has controls and an editable area. Each has their own DIV. I want the controls to take up as much space as they need to, and the editable area to fill the rest of the space.

If I use tables, this is extremely easy to achieve. I just turn off borders and padding and margins, and throw each DIV into a cell in its own row, and maybe fiddle with max-height on the controls DIV. This is what it looks like:

Base table http://img407.imageshack.us/img407/8435/table1.png

Same table with window resized another way http://img264.imageshack.us/img264/6438/table2p.png

Notice the editable section taking up as much space as possible without causing scrollbars to appear.

I've monkeyed with various CSS examples and nothing seems to work without having some JavaScript run on resize to make the editable DIV be the height of the parent minus the height of the controls.

Of course, I can make the parent DIV have display:table and the child DIVs wrapped in display:table-row DIVs and themselves have display:table-cell, but...well...in that case it's exactly the same as using TABLE, TR, and TD, but ten times more ugly for the sake of CSS purity. (Why bother?)

So, without directly using display:table & friends, nor TABLE/TR/TD, nor JavaScript, is there a pure CSS way of doing this? In other words, is there a pure CSS way of saying, DIV1, take up as little vertical space as possible, and DIV2, take up the remaining vertical space within the parent element?

If there isn't, I'm quite ready to stop subscribing to the "pure CSS" mentality. It's caused me enough grief with very little developer or end-user benefit.

Answer 1

You only have so many options. If you want table-like behavior without using a table then use display:table and give yourself the option of changing your mind later. That way, while uglier in the markup (subjective), makes more sense to me: you'll end up with a few more elements, but you won't be locked in to a specific layout.

If you don't care about the markup then pull the trigger and use a table. This will be easier in the short-term.

My question: If you don't want to use JavaScript, how will you be implementing your editor controls?

Answer 2

This question speaks to a problem I see a lot of people faced with lately: obey the "only use tables for tabular data" rule, or just use tables and do 1/3 the work. The fact that this is even a difficult decision is a demonstration of how standards-crazy we've all become. Forget the standards, use tables, get it done cleanly and simply. If W3C has a problem with that, they can complain right after they create a better alternative.

Answer 3

As far as I know using percentage for width/height should work fine.

Answer 4

I'd second perfectDay's answer, but I'd ask you to go crazy and try and describe what you'd like it to look like. Maybe with ascii-art or a link to a graphic, so we know what layout you'd like us to help you achieve.

I'd also add that I've not been sleeping (again) recently, so...if I've missed an obvious super-clear description of what you'd like us to help you achieve you have my most sincere apologies. :)