[OpenLayers-Users] can't get full sized map to share space

Tue Jun 21 17:33:04 EDT 2011

Howdy,

this is an OpenLayers/CSS newbie question. I am trying to get a full screen map,
just like the example code in the distribution. The wrinkle is that I want a
little fixed height content at the top and the map to fill the rest of the page.
All browser window resizing is reflected in the map. Think of a menu bar at the
top of the page. For the life of me, I can't get this to work. 

I'm including source inline. I would expect this to work. If anyone could point
out how to get this to work, I'd sure appreciate it.

Thanks,
Danny

%< ---------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title>Mapping Application</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
html,body {
height:100%;
width:100%;
margin:0;
}
#top_content {
position:absolute;
top:0;
left:0;
margin: 0;
padding: 0;
bottom: 50;
width: 100%;
}
#map {
position:absolute;
top:50;
left:0;
margin: 0;
padding: 0;
bottom: 0;
width: 100%;
}
</style>
<script type="text/javascript" src="/static/openlayers.js"></script>
<script type="text/javascript">
var map, layer;
function init(){
map = new OpenLayers.Map( 'map'); //
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(0, 0),6);
}
</script>
</head>
<body onload="init()">
<div id="container">
<div id="top_content"> top content</div>
<div id="map" ></div>
</div>
</body>
</html>