Div要素をページ全体に表示する (でぃべろっぱーず・さいど)

CSSを使って、Div要素をページ全体に表示する方法。

↓下記エントリを参考に。
CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 | CREAMU

Google Maps をページ全体に表示させようとして、height 指定を100%にしてもなかなかうまくいかなかったんですが、このCSSの指定でいけるんですね。

ということで、Google Maps API のサンプルを書き直すと↓こんな感じ。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<style type="text/css">
body {
background:#ccc;
margin:0;
padding:0;
}
#map {
position:absolute;
width:100%;
height:100%;
left:0%;
top:0%;
background:#fff;
color:#999;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=your_api_key" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map"></div>
</body>
</html>