Forum Moderators: not2easy
I have a page with a narrow strip along the top, containing some links and whatnot (You can think of it as a "menu bar.")
The rest of the page needs to be completely filled with content. It's a Google Map, so I have to explicitly define a size (Google Maps will not define a size, they use whatever the container gives them).
It works perfectly if I do not have the menu strip, as I can do this:
<body style="width:100%;height:100%">
<div id="map" style="width:100%;height:100%;position:absolute"></div>
</div>However, when I introduce the menu strip, things change:
<body style="width:100%;height:100%">
[red][b]<div id="menu" style="width:100%;height:1.5em"></div>[/b][/red]
<div id="map" style="width:100%;position:absolute;[red][b]height:?;top:1.5em[/b][/red]"></div>
</div>This works perfectly in FF:
<body style="width:100%;height:100%">
<div id="menu" style="width:100%;height:1.5em"></div>
<div id="map" style="width:100%;position:absolute;[red][b]bottom:0;top:1.5em[/b][/red]"></div>
</div>However (of course), not in IE.
Here's the kludge I use for cross-browser compliance:
<body style="width:100%;height:100%">
<div id="menu" style="width:100%;height:1.5em"></div>
<div id="map" style="width:100%;position:absolute;top:1.5em;[red][b]height:97%[/b][/red]"></div>
</div>EEEWWW...
The idea is not to trigger scrollbars. I want the window to be completely flexible and to use as much of the space as possible. The kludge gives me 95% of this. The window has to be made pretty small to trigger scrollbars, but there is a tiny strip on the bottom for most sizes.
BTW: Frames are out, even though they would give me exactly what I want. I don't want to get into why, but I won't use them.
What is the simplest and most robust solution to this?
I am actually trying to that right now, to no avail. I keep getting scrollbars, no matter what I do.
I need to do a bit of research, but I seem to remember that IE doesn't use the traditional "top, bottom, right, left" properties. It has something else.
What I want is the solution that works for FF. That is the cleanest and most effective.
If anyone is interested, I can SM the URI of the page that demonstrates the issue. It is jammed full of JavaScript, but hardly has any CSS or markup.
Best to put the JS in a conditional comment so no other browsers have to render it.
[edited by: Xapti at 7:18 pm (utc) on May 23, 2007]
I did figure out a less kludgy (but still kludgy) way to do it:
I hide the top 30 pixels of the map under the bar and offset the map controls. This is good, except that some windows show up under the bar. I was able to ameliorate that by forcing the map to pan the point of interest to the center. This makes most popups happen closer to the center. Not perfect, but it looks very "cool," and has been received well.
If people have not been using the Google Maps API [google.com], you may not know what you're missing. Google did their homework.
