CSSベースで、テーブルライクな
究極のマルチカラムに挑むパート4です。
前回のように、上中下3カラムの
真ん中のボックスの高さ幅が自在に伸び縮みしつつ、
つねにフッター部分がブラウザ画面の最下部にある、
フレームセットを使ったかのようなレイアウトを、CSSで目指しますが、
前回の欠点である、
真ん中のボックス（横幅100％）に、
固定幅（横幅例えば600px）のボックスを入れ子にした場合、
センタリングができなかったことを克服したバージョンです。
▽画像ですが、画面分割のサンプルをつけてみました。
（分割がわかりやすいように、色づけしています）
▽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）にする。
ボックスの下側に20pxの山吹色（#ffcc00）の実線をつける。
*/
div#box1{
width: 100%; height: 100px; position: absolute; left: 0px; top: 0px; background: #ff0000; border-bottom: 20px solid #ffcc00;
}
/*
【02-a・真ん中のボックス（高さ幅可変)】
ページ内の id名box2-aが付いた<div>に対して、
ボックスの横幅を親ボックス（この場合はbody）に対して100%にする。
ボックスの高さ幅を自動にする。（省略可能）
ボックスの位置指定方法を親ボックス（この場合はbody）に対して絶対で設定する。
ボックスの位置を親ボックス（この場合はbody）より上から120px、下から100px離す。
背景を山吹色（#ffcc00）にする。
ボックス内の内容が、ボックスからはみ出したときの処理は自動（ブラウザ依存）に設定する。
*/
div#box2-a{
width: 100%; height: auto; position: absolute; top: 120px; bottom: 100px; background: #ffcc00; overflow: auto;
}
/*
【02-b・真ん中のボックスの入れ子ボックス1（高さ幅可変)】
ページ内の id名box2-bが付いた<div>に対して、
ボックスの横幅を親 ボックス（真ん中のボックス#box2-a）に対して100%にする。
ボックスの高さ幅を親ボックス（真ん中のボックス#box2-a）に対して100%にする。
ボックスの位置指定方法を親ボックス（この場合は真ん中のボックス#box2-a）に対して絶対で設定する。
ボックスの位置を親ボックス（この場合は真ん中のボックス#box2-a）より左上から0px離す。（左上にぴったりくっつける）
背景を水色（#00ffff）にする。
ボックス内の内容が、ボックスからはみ出したときの処理は自動（ブラウザ依存）に設定する。
ボックスの内容を中央揃えに（センタリング）する。
*/
div#box2-b{
width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: #00ffff; overflow: auto; text-align: center;
}
/*
【02-c・真ん中のボックスの入れ子ボックス2（高さ幅可変)】
ページ内の id名box2-cが付いた<div>に対して、
ボックスの横幅を600pxにする。
ボックスの高さ幅を親ボックス（真ん中のボックス入れ子ボックス1 #box2-b）に対して100%にする。
ボックスの位置を親ボックス（真ん中のボックス入れ子ボックス1 #box2-b）の中心にする。（余白を自動調整してセンタリング）
背景を紫色（#cc99ff）にする。
ボックス内の内容を左揃えにする。
*/
div#box2-c{
width: 600px; height: 100%; background: #cc99ff; margin: 0px auto; text-align: left;
}
/*
【03・下のボックス（高さ幅100px固定)】
ページ内の id名box3が付いた<div>に対して、
横幅を親ボックス（この場合はbody）に対して100%にする。
高さ幅を100pxにする。
ボックスの位置指定方法を親ボックス（この場合はbody）に対して絶対で設定する。
ボックスの位置を親ボックス（この場合はbody）より左から0px、下から0px離す。（左下にぴったりくっつける）
背景を黄緑（#ccee00）にする。
ボックスの上側に20pxの山吹色（#ffcc00）の実線をつける。
*/
div#box3{
width: 100%; height: 100px; position: absolute; left: 0px; bottom: 0px; background: #ccee00; border-top: 20px solid #ffcc00;
}
-->
</style>
</head>
<body>
<div id="box1">上ボックス（ヘッダー用）</div>
<div id="box2-a">
<div id="box2-b">
<div id="box2-c">
コンテンツはここに挿入。
</div>
</div>
</div>
<div id="box3">下ボックス（フッター用）</div>
</body>
</html>
※id名やclass名は任意です。
Windows IE7.0 FF2.0
Mac Safari3.0 FF2.0
で確認
------------------------------------------------------------
【MEMO：コンテンツ部分のヘッダーとフッターとの境目余白に関して】
上ボックスの
border-top: 20px solid #ffcc00;
下ボックスの
border-bottom: 20px solid #ffcc00;
の各数値と色を変更すれば、余白の幅、色を調整できます。
ただし、
幅を変更した際は、
真ん中のボックス（#box2-a）の位置指定
top、bottomの数値を増減して調整する必要があります。
興味深かったのは、#box2-cの記述で、
positionによる位置指定方法の選択もせず、
親ボックスのサイズを絶対サイズ（px）で指定することなく、
height: 100%が使えたことです。
（height: 100%って、意図通りに下までいっぱいいっぱいにならないことが多くて、
いまいち使いにくかったのですが... ひょっとすると気軽に使えるようになる兆しなのかも...）
ちなみにwin IE7.0限定ですが、positionを使った
変則的な記述もできましたので
以下に参考までに載せておきます。
/*
【02-c・真ん中のボックスの入れ子ボックス2（高さ幅可変) ※win IE7.0限定】
ページ内の id名box2-cが付いた<div>に対して、
ボックスの横幅を600pxにする。
ボックスの高さ幅を親ボックス（真ん中のボックス入れ子ボックス1 #box2-b）に対して100%にする。
ボックスの位置指定方法を親ボックス（真ん中のボックス入れ子ボックス1 #box2-b））に対して相対で設定する。
ボックスの位置を親ボックス（真ん中のボックス入れ子ボックス1 #box2-b）より上から0px、左から50％離す。（上にぴったりくっつけて、左右余白を均等にする＝センタリングする）
背景を紫色（#cc99ff）にする。
ボックス内の内容を左揃えにする。
*/
div#box2-c{
width: 600px; height: 100%; position: rerative; top: 0px; left: 50%; background: #cc99ff; text-align: left;
}
left: 50%がこの記述のキモの部分ですが、
なぜ、50％なのか、意味不明なところです。
残念ながら、まだまだ主流なwin IE6.0で、表示が崩れるため、
現時点では、あまり実用的ではないのが玉にキズ、です。
（真ん中のボックスが、下まで伸びきらない状態になります。）
IE6.0よ、はよなくなれー、と思いつつ、
実用に向けて、回避方法を模索したいと思います。
【CSSベースのHTMLコーディングの最新記事】
