It really depends on your current HTML and CSS but here's one way to do it.
The main layout uses the YUI Grids framework with some tweaks to correct the height of the map. As Gutzofter mentioned the crux of the fix is to assign appropriate heights to all of the map's ancestor elements. The following code was tested on IE6, IE7, IE8, Chrome 3 and Firefox 3.5
Hosted Demo: http://jsbin.com/okeja (Editable via http://jsbin.com/okeja/edit)
Full source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Maps Demo</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script src="http://www.google.com/jsapi?key=ABQIAAAAyxeu8JwbgrekKUEdhxe4EBTWx8njL9qYLnq46LoOVGM6mIGTuxQWuJ3Va3yaItAmIEsT4jgllHk5Ig" type="text/javascript"></script>
<link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
<style type="text/css" media="screen">
html { height: 100%; background-color: #000; overflow: hidden; }
body { height: 100%; background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
a:link, a:visited, a:hover { color: gray; }
#doc3 { height: 100%; padding:0; margin: 0; }
#bd { height: 100%;}
.container { height: 60%; }
.map { height: 100%; }
#map_canvas { height: 100%; }
.content { overflow-y: auto; height: 40%; }
</style>
</head>
<body>
<div id="doc3" class="yui-t7">
<div id="bd">
<div class="yui-gf container">
<div class="yui-u first">
<ul>
<li><a href="#foo">foo</a></li>
<li><a href="#bar">bar</a></li>
<li><a href="#baz">baz</a></li>
<li><a href="#spam">spam</a></li>
<li><a href="#eggs">eggs</a></li>
</ul>
</div>
<div class="yui-u map">
<div id="map_canvas"></div>
</div>
</div>
<div class="yui-g content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia diam quis ipsum iaculis blandit. In mattis nibh ac velit congue a vehicula erat facilisis. Nam imperdiet nulla id tellus commodo et cursus urna aliquam. Donec vestibulum, eros ac rhoncus sodales, mi lacus elementum turpis, quis varius augue orci eget est. In vel vehicula erat. Aliquam eu orci lorem. Nullam a nisi adipiscing purus imperdiet convallis vitae varius elit. Mauris eu hendrerit eros. Sed at nunc sit amet sapien bibendum varius et eu augue. Nulla nisi est, bibendum id interdum vitae, fringilla eu mi. In et dolor est, quis rutrum enim. Vivamus quam nulla, euismod in elementum at, pulvinar nec est. Praesent tincidunt venenatis libero vitae interdum. Nam mattis molestie ligula, et laoreet risus eleifend eu.
Proin sodales lacus quis sem congue venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer dictum enim a nibh pharetra venenatis. Cras lacinia nibh in eros malesuada id rhoncus erat mattis. Mauris urna ipsum, vulputate nec malesuada ut, volutpat vel magna. Duis blandit, dolor quis convallis faucibus, orci arcu vulputate nulla, a ullamcorper ligula risus eu mi. Quisque magna mauris, molestie id luctus id, aliquam vitae leo. Proin ut ligula et lacus iaculis sollicitudin. Fusce blandit consectetur nisi at cursus. Donec tincidunt sem et justo dapibus eu facilisis nunc laoreet. Quisque nibh urna, convallis ac ullamcorper in, dapibus et arcu. Nullam vel posuere nulla. Maecenas sed erat quam, placerat imperdiet metus.
Vivamus scelerisque, metus vitae venenatis pulvinar, ante libero auctor nisi, id malesuada orci tellus mattis nunc. Cras pretium sem nec est suscipit dictum. Etiam viverra fermentum augue, a gravida velit facilisis sed. Cras quis velit tortor, sit amet pellentesque leo. Mauris ligula nisi, tincidunt at faucibus a, aliquam vel elit. Etiam fringilla diam nisl, faucibus vestibulum justo. Aliquam erat volutpat. Sed diam diam, sodales eget mattis varius, vehicula at ipsum. Suspendisse semper blandit neque, vel bibendum dolor tincidunt at. Sed eleifend mollis metus vitae vehicula. Proin in augue vitae velit auctor vulputate. Sed auctor dictum blandit. Sed diam mi, aliquet vitae tempus sed, pharetra vel felis. Praesent tincidunt ipsum faucibus odio scelerisque quis lobortis odio facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</p>
</div>
</div>
</div>
<script>
function mapsLoaded() {
var map = new google.maps.Map2(document.getElementById("map_canvas"));
map.setMapType(G_SATELLITE_MAP);
map.enableContinuousZoom();
var geocoder = new GClientGeocoder();
geocoder.getLatLng('Dubai', function(latLng){
map.setCenter(latLng, 7);
for (var i = 0; i < 4; i++) {
after(3 * i, function(){map.zoomIn(null, null, true)});
}
});
}
function after(seconds, fn) {
setTimeout(fn, seconds * 1000);
}
function loadMaps() {
google.load("maps", "2", {"callback" : mapsLoaded});
google.load("jquery", "1.3");
}
loadMaps();
</script>
</body>
</html>