CSSベースで、テーブルライクな
究極（？）のマルチカラムに挑むパート3です。
テーブルメインのレイアウトでよく使われている、
リキッドレイアウトをCSSで実現してみます。
今回はレイアウトの垂直方向の真ん中部分が伸縮自在な3カラムのバージョンです。
今回のミッションもパート1のように、
ブラウザ画面いっぱいに、自在に伸縮できる3カラムレイアウトの実現を狙いますが
上中下の真ん中のボックスの高さ幅が自在に伸び縮みしつつ、
つねにフッター部分がブラウザ画面の最下部にある、
フレームセットを使ったかのようなレイアウトを、CSSで目指します。
▽CSSベースのHTML
レイアウトの垂直方向の真ん中部分が伸縮自在な、
フレームライクな上中下3カラム
------------------------------------------------------------
CSSに関する解説も
ソース内に入れ込んでいます。
------------------------------------------------------------
＜例＞
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>レイアウトの垂直方向の真ん中部分が伸縮自在なフレームライクな上中下3カラム</title>
<style type="text/css">
<!--
/*
【01】
ブラウザ画面とHTML表示領域との間隔を0pxにする。（画面の端に隙間を空けない）
ページ内の文字サイズを、初期状態の100％に設定する。
ページ内の文字色を黒（#000000）にする。
*/
body {
margin: 0px; font-size: 100%; color: #000000;
}
/*
【02・上のボックス（高さ幅100px固定)】
ページ内の id名box1が付いた<div>に対して、
横幅を親ボックス（この場合はbody）に対して100%にする。
高さ幅を100pxにする。
ボックスの位置指定方法を親ボックス（この場合はbody）に対して絶対で設定する。
ボックスの位置を親ボックス（この場合はbody）より左から0px、上から0px離す。（左上にぴったりくっつける）
背景を赤（#ff0000）にする。
*/
div#box1{
width: 100%; height: 100px; position: absolute; left: 0px; top: 0px; background: #ff0000;
}
/*
【03・真ん中のボックス（高さ幅可変)】
ページ内の id名box2が付いた<div>に対して、
横幅を親ボックス（この場合はbody）に対して100%にする。
高さ幅を自動にする。（省略可能）
ボックスの位置指定方法を親ボックス（この場合はbody）に対して絶対で設定する。
ボックスの位置を親ボックス（この場合はbody）より上から100px、下から100px離す。
背景を山吹色（#ffcc00）にする。
ボックス内の内容が、ボックスからはみ出したときの処理は自動（ブラウザ依存）に設定する。
*/
div#box2{
width: 100%; height: auto; position: absolute; top: 100px; bottom: 100px; background: #ffcc00; overflow: auto;
}
-->
/*
【04・下のボックス（高さ幅100px固定)】
ページ内の id名box3が付いた<div>に対して、
横幅を親ボックス（この場合はbody）に対して100%にする。
高さ幅を100pxにする。
ボックスの位置指定方法を親ボックス（この場合はbody）に対して絶対で設定する。
ボックスの位置を親ボックス（この場合はbody）より左から0px、下から0px離す。（左下にぴったりくっつける）
背景を黄緑（#ccee00）にする。
*/
div#box3{
width: 100%; height: 100px; position: absolute; left: 0px; bottom: 0px; background: #ccee00;
}
-->
</style>
</head>
<body>
<div id="box1">上ボックス（ヘッダー用）</div>
<div id="box2">コンテンツはここに挿入。</div>
<div id="box3">下ボックス（フッター用）</div>
</body>
</html>
※id名やclass名は任意です。
Mac Safari3.0, FF2.0
Windows IE7.0 FF2.0 で確認
------------------------------------------------------------
【MEMO：スクロールバーに関して】
表示内容が一部はみだすくらいに、ブラウザ画面を縮小した場合、
高さ幅100％のテーブルを使ったときのように、ブラウザ画面の天地左右に
スクロールバーは付かずに、真ん中のボックスのみに付くようになります。
【MEMO：罫線に関して】
例えば、真ん中のボックスの上下に罫線を付ける場合は、
その罫線の太さ分、上下の位置指定をずらす必要があります。
▽例えば、3pxの実線を上下につけた場合は、
真ん中のボックスの位置指定は top: 103px;（上から103px離す）
下のボックスの位置指定はbottom: 103px;（下から103px離す）
となります。
今回の高さ幅可変の真ん中のボックス内には、
テキストしか入っていない状態なので、
比較的簡単なスタイルシートで事足りましたが、
仮に真ん中のボックス内に、
横幅、高さ幅が固定の小さなボックスを中央に配置することを考える場合、
○水平方向中央には、そのボックスを持ってこれるのですが
×垂直方向中央に持ってくるには、さらなる修練が必要な感じです。
これができれば、かなりCSS（のみ）レイアウトの
表現の可能性が広がるかな、と思います。
さてさて、果たしてCSSのみで実現可能かどうか、
また機会をつくって探っていきたいと思います。
ところで、これをWindows IE6でも表示する方法はできるのでしょうか？
いろいろやってみてるのですが、今のところまったくダメで。。。
もう既に解決されたかもしれませんが、当方でもWindows IE6.0で試してみて、いい方法が見つかったらまた書き込むようにしますね。
真ん中のボックスと同じ背景色をつければ、
下まで伸びきらないボックスを、
見た目だけは、いっぱいに拡がってるように
見せることはできますが、
おっしゃってるような
真ん中のボックスだけにスクロールが付く状態には
なりませんので、根本的な解決法にはなりませんね...。
また何かわかったら書き込むようにします。
--------------------------------------------------
今回調べているうちに、IE6.0のCSSバグを
紹介されているページを見つけました。
ご存じのことかもしれませんが、
参考になさってください。
▽参考【Internet Explorer (Windows) CSSバグリスト】
〜left, topが指定された要素ではright, bottomを認識しない(IE6)〜
http://cssbug.at.infoseek.co.jp/detail/winie/b043.html
問題のサイトの方ですが、
結局、今さらフレームでやってしまいました。（通常の公開サイトではなかったのでなんとか。。。）
非常にシンプルでいい方法だと思ったのですが、まだまだIE6ご健在のことなので。。。
色々とありがとうございます。
また、参考にさせていただきに来ます。
未だ解決策を見いだせずにいますが、依頼されて、このようなケースに遭遇したときは、恐らくtakeさんのようにフレームを使うだろうな、と思います...。
なんとか、フルCSSでレイアウトしたいところですが、
道は険しいです。
またよかったら覗きにきてください。
記事を参考にさせていただきましたありがとうございます。
上でお話しされているie6での表示ですが、
* html #box2 {
height: expression((document.documentElement.clientHeight - A ) + 'px');
}
※Aの部分はbox1とbox3の高さの合計
というエクスプレッション制御でなんとかなるようです（expressionっていうのが癪ですが）
では、通りすがりでした
expression、、、やはりIE6用に用意するしかないんでしょうね。
といっても、javascriptで制御するよりは、汎用性があってグッドな方法ですね！
ありがとうございます！