カラム高さ揃え+固定フッター

Question

いつもお世話になります。
●確認ブラウザIE6、IE7、FF、 Mac Safari FF
左側幅可変のリキッドレイアウトの中で、
div#wrapの中にある「#boxB、#boxC」のカラム高さが揃った上で
#footerはページ下部に固定されている、添付図の状態にしたい。
●できてること：
IE7、FFにおけるカラム高さの統一、固定フッタ
●ここができない：
1.IE6にてboxBとCの高さが揃わない（Cが足らない）
2.#wrapと#footerにすきまが空く（boxBとCの背景色がfooterの上まで来てほしいのです）（全部のブラウザにて）

★CSS
/*リキッドレイアウト部分*/
* {
 margin:0;
 padding:0;
}


body {
 text-align:center;
}

#container {
 width:96%;
 margin-left:auto;
 margin-right:auto;
 text-align:left;
}


#boxA {
 background:#ffc;
}

#boxB {
 background:#fcc;
 width:100%;
 float:left;
 margin-right:-200px;

}

#boxB p {
 margin-right:200px;
}

#boxC {
 background:#ccf;
 width:200px;
 float:left;
 
}

#boxD {
 background:#cfc;
 width:100%;
 float:left;
}


/*100%固定フッタのためのCSS*/
*{
margin:0;
padding:0;
}

html,body{
height:100%;
background-color: #000000;
color: #000000;
}
html{
overflow-y:scroll;
}
#container {  
    width: 100%;  
    position: relative;  
    height: auto !important;  
    height: 100%;  
    min-height: 100%;  
}
div#footer{
position:fixed;
bottom:0;
left:0;
text-align:center;
width:100%;
}

/* * * IE6 * * * */
* html,
* html body{
overflow-y:hidden;
}
* html div#maincontents{
height:100%;
overflow-y:scroll;
}
* html div#footer{
position:absolute;
}


/* カラム高さが違うものを揃える */
         
#wrap {
overflow:hidden;
}

#boxB,#boxC {
padding-bottom: 32768px;  
margin-bottom: -32768px;  
}

abril · Accepted Answer

多分、添付のレイアウト（フッター固定、2カラムの内メインはリキッド、2カラムの描画領域は常にフッターの上端まで）を、boxBとboxC両方の描画領域を内容量を問わず「実際に」footerの上端まで常にぴったりにする、というのはちょっと難しいのでは…と思います。代替案としていかにもboxBとboxCがfooterの上端まで描画されている様な「見た目だけ」なら結構簡単にできるのですが。質問者様の実際の(X)HTMLのソースがありませんでしたので、過去の質問から、XHTML 1.0 Transitional（XML宣言なし）／Shift_JISと仮定しました。以下はその仮定で検証したサンプルです。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- サンプル

ボックスB最初
ボックスB
ボックスB
ボックスB
ボックスB
ボックスB
ボックスB
ボックスB
ボックスB
ボックスB
ボックスB
ボックスB最後

ボックスC最初
ボックスC
ボックスC
ボックスC
ボックスC
ボックスC
ボックスC最後

---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- * { margin:0; padding:0; } html , body { height: 100%; background: #000; color: #000; } body { text-align: center; } #header { background: #ffc; } #container { position: relative; width: 96%; height: auto !important; height: 100%; min-width: 600px; min-height: 100%; margin: 0 auto; text-align: left; background: url(../images/boxc_back.gif) right top repeat-y #fcc; } #wrap { zoom: 100%; width: 100%; padding-bottom: 3em; } #wrap:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } #footer { position: absolute; bottom: 0; width: 100%; height: 3em; text-align: center; background: #cfc; } #boxB { float: left; width: 100%; margin-right: -200px; } #boxC { float: left; width: 200px; } ---------------------------------------------------------------------- IE6/IE7、Firefox2/3、Safari3での表示結果を確認していますが、ほぼご希望通りになっているかと思います。 boxBとboxCには背景は指定せず、親の親であるcontainerの背景画像として指定する事で代用します。上記の#containerのbackgroundで指定している、boxc_back.gifという画像は、カラム幅が200pxで固定されているboxCの背景です。今回のソースではboxCの背景は#ccfですので、W200px×H任意の領域を#ccfで塗った画像を用意します（これが実際には何らかのシームレスなテクスチャだとしても同じ要領です）。これを、#containerのbackgroundで”右端から縦方向にのみリピート”させる事でいかにもboxCの領域にだけ#ccfの背景色が塗られている様な状態になります。一方、背景色としてboxBの背景にしたい#fccを併せて指定する事で、右から200pxより残りの領域に関しては#fccが描画されるので、結果としてこちらもboxBの領域にだけ#fccが適用されている状態になります。また、footerの高さは固定とします。今は仮に3emとしてありますが、実際の内容量に合わせて適当な値をemで指定して下さい。何故固定するかですが、containerの子要素として下端にabsoluteで固定されたfooterがある為、footerの前にくるboxBとboxCの内容量がウィンドウにスクロールが発生する様なボリュームになった際はそのままだと重なってしまいます。それを回避するには、#containerに”footerの高さと同じ値の”padding-bottomを指定する事で、常にfooterの高さ分の余白を確保できて実際の内容（テキストなど）は重ならない様にできるからです。それから、#footerにclearプロパティを指定してfloatしているboxBとboxCをクリアするかわりに、boxBとboxCの直近の親である#wrapに所謂clearfixの指定を盛り込む事でクリアしてしまいます。あと、これはオマケとして付け加えましたが、ウィンドウの幅を極端に縮めて左右の描画領域が200pxより小さくなってしまうと（まあ実際にはそこまで縮めて見る閲覧者がいるとは思えませんが）、リキッドでマイナス・マージンを指定されているboxBがboxCの領域に重なってしまいます。なので、できればそれを回避する為に、リキッド・レイアウトでも最小の幅は指定しておいた方が良いと思います。この場合、#containerにmin-widthで200px以上の値を指定しておく事で実現できます。今回は仮に600pxとしてありますので、ウィンドウの幅が縮められてもboxBはウィンドウのサイズにかかわらず左右400px以上の描画領域が確保される事になります。 ※ただし、このmin-widthはIE6では実装されていません。expressionを使う事で擬似的にmin-widthを実装できるのですが、表示の際にブラウザが固まってしまったりする事もあるのでちょっと注意が必要です。いかがでしょうか？ご希望に添わなかったり不具合がある様でしたら補足して下さい。

abril · Answer

> Footerにクリアプロパティを指定しないで#wrapにクリアフィクスを指定するのはどういう理由からなんでしょう…?

サンプルの構造の場合、仮に#wrapにclearixを用いないで#footerにclearプロパティを入れると不具合が出ます。
具体的には、boxBとboxCの内容が多くなってウィンドウにスクロールバーが発生すると、footerの下に丁度3em分と思われる空きが出来てしまう（html、bodyの背景色である黒が見える）のです（例によってIE6だけ挙動が違って出ませんが）。
何でそうなるのかは…すいませんちょっと面倒臭いので説明は省略させて下さい。

カラム高さ揃え+固定フッター

> Footerにクリアプロパティを指定しないで#wrapにクリアフィクスを指定するのはどういう理由からなんでしょう…?

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング