常にブラウザのクライアント領域一杯にブロック要素を配置するには

JavaScript

通常のリッチクライアントのように常にクライアント領域一杯に展開させたい。縦に 3ペイン header, content, footer の領域があり、header と footer の高さが固定で content の高さはクライアント領域の高さにあわせて伸び縮みする場合を考える。
Internet Explorer の 6.0 を捨ててしまえば、CSSだけで対応できる。

Sample 1

<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Full Region Sample</title>
<style type="text/css">
html { padding:0 padding:0; overflow:hidden; }
body { margin:0; padding:0; background-color:yellow; }
body { width:100%; height:100%; }
#header  {
  background-color:red;
  position:absolute;
  top:0;
  height:100px;
  width:100%;
}

#content {
  background-color:green;
  position:absolute;
  top:100px;
  height:auto;
  bottom:200px;
  width:100%;
}

#footer {
  background-color:blue;
  position:absolute;
  bottom:0px;
  height:200px;
  width:100%;
}
</style>
</head>
<body>
 <div id="header"> header </div>
 <div id="content"> content </div>
 <div id="footer"> footer </div>
</body>
</html>

IE 6.0 では content 部分の伸び縮みが効かない。そこで JavaScript を使って、body の onresize イベントで #content の div の高さと幅を設定してみた。読み込んだ直後には onresize は走らないため、onload イベント時にも onresize を呼んでいる。
resize イベントは多重呼び出されるようなので、フラグでループしないように制御している。

Sample 2 - IE6 に対応

<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Full Region Sample</title>
<style type="text/css">
html { padding:0 padding:0; overflow:hidden; }
body { margin:0; padding:0; background-color:yellow; }
#header {
  background-color:red;
  position:absolute;
  top:0;
  height:100px;
  width:100%;
}
#content {
  background-color:green;
  position:absolute;
  top:100px;
  bottom:200px;
  width:100%;
}
#footer {
  background-color:blue;
  position:absolute;
  position:absolute;
  bottom:0;
  height:200px;
  width:100%;
}
</style>
<script type="text/javascript">
var Desktop = {
  getWidth: function()
  {
    return window.innerWidth ? window.innerWidth : document.documentElement.clientWidth;
  },

  getHeight: function()
  {
    return window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
  },

  resizeToFull: function(region)
  {
    if (this.flagResizing) return;
    this.flagResizing = true;

    var h = this.getHeight();
    var w = this.getWidth();

    h -= 300;
    if (h < 0) h = 0;
    region.style.height = h  + 'px';
    region.style.width = w + 'px';
    this.flagResizing = false;
  }
}
</script>
</head>
<body onload="onresize()" onresize="Desktop.resizeToFull(document.getElementById('content'))">
 <div id="header"> header </div>
 <div id="content"> content </div>
 <div id="footer"> footer </div>
</body>
</html>