I confess that i've been hiding under a stone for quite some time when it comes to contemporary HTML stuff, for most of the things i'm doing on the presentation level even good old HTML 1.0 would be sufficient if it weren't for the occasinal tabular data ...
So while i know CSS in theory i've never really looked into the black magic of doing CSS layouts and stuff ... until now ...
What i'm up to right now was to produce a small series of step by step examples on how to use OpenLayers to present customized OpenStreetMap based maps, and for that i wanted to have a simple layout like this:
| Some text |
| MAP |
So a little descriptive text on top (about 4-5 lines max) and the map taking all the remaining vertical space of the browsers content area, but not beyond that so that no scrollbars will appear.
Looks like a simple layout manager task, doesn't it?
So i wrapped the text and map areas up as <div>s and started to play with their CSS height settings.
Just to summarize: epic fail.
Quite a few google searches, some selfhtml study and some chats with people who should know i only came to the conclusion that this does not seem to be possible using CSS alone.
But, surprise, size change event handlers only exist on the document / body level (at least in FireFox), and for default font size changes there doesn't even seem to be any event handler at all.
So looks as if i need to actively poll the size of the window and the text part on a regular basis and take action when detecting size changes, probably with some extra delay logic that waits for sizes to stabelize before taking resize action on the map div to avoid constant redraws while the user is still performing window or font size changes ...
Fun .... NOT!
PS: for now i'm just going to settle with a simple 20% text, 80% map split even though that will waste some vertical space and will break if the user chooses to increase font size to some very large value ... it's still frustrating though that the browser can't just do a "whatever space is left" calculation even though it has all the necessary input data anyway
I probably should mention that the advantage to this approach as opposed to the CSS percentages is the lack of wasted space. Because the top of the #map element is determined in JS after the page loads, and the bottom is statically set to 0, the map cannot drop below the bottom of the page. I'm not sure how this will affect your maps, but divs filled with text are acting fine. The only time a scrollbar is created is when actual content is being cut off. If the map itself needs to be resized there should still be a solution to this problem.
I went and looked at this openlayers thing, and played around with the code. I saw a bit of a problem when the map wouldn't load because there was no explicit height set on #map in the CSS. The solution to this is to get the computed height of the div, and set it to that. That will convince the map to load, but be ignored by the browser when creating the box for the map, allowing for resizing and no capturing events.
So as not to ridiculously enlarge the comments section agai, I've put the full code on pastebin. You can view it here: http://pastebin.com/GumWwSMB
I'll continue to claim that CSS is a mess though, it should have something like "height: auto-as-small-as-possible" and "...: auto-as-large-as-possible" instead of having to fall back to custom JS code for this ...
I had the same awakening few years ago when i though i would learn the proper way of using css instead of hacking this or that in nasty way ..... i got 2 books on css and guess what! they both said you need hacks to do the simplest 3 col layout. There is just no proper way to work with css as i see it.
I manage to do what i need but even now css is still annoying.