Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
  • ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:カラム高さ揃え+固定フッター)

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

このQ&Aのポイント
  • カラム高さ揃えと固定フッターを実現するためのCSSについての質問です。
  • 左側幅可変のリキッドレイアウトの中で、#boxBと#boxCのカラム高さが揃った上で、#footerをページ下部に固定したいです。
  • IE6では#boxBと#boxCの高さが揃わず、#wrapと#footerにすきまが空いてしまいます。

質問者が選んだベストアンサー

  • ベストアンサー
  • abril
  • ベストアンサー率69% (388/560)
回答No.1

多分、添付のレイアウト(フッター固定、2カラムの内メインはリキッド、2カラムの描画領域は常にフッターの上端まで)を、boxBとboxC両方の描画領域を内容量を問わず「実際に」footerの上端まで常にぴったりにする、というのはちょっと難しいのでは…と思います。 代替案としていかにもboxBとboxCがfooterの上端まで描画されている様な「見た目だけ」なら結構簡単にできるのですが。 質問者様の実際の(X)HTMLのソースがありませんでしたので、過去の質問から、XHTML 1.0 Transitional(XML宣言なし)/Shift_JISと仮定しました。 以下はその仮定で検証したサンプルです。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>サンプル</title> <link rel="stylesheet" href="css/sample.css" type="text/css" media="all" /> </head> <body> <div id="container"> <div id="header"> ヘッダー(高さ任意) </div> <div id="wrap"> <div id="boxB"> ボックスB最初<br />ボックスB<br />ボックスB<br />ボックスB<br />ボックスB<br />ボックスB<br />ボックスB<br />ボックスB<br />ボックスB<br />ボックスB<br />ボックスB<br />ボックスB最後 </div> <div id="boxC"> ボックスC最初<br />ボックスC<br />ボックスC<br />ボックスC<br />ボックスC<br />ボックスC<br />ボックスC最後 </div> </div> <div id="footer"> フッター(高さ固定) </div> </div> </body> </html> ---------------------------------------------------------------------- 【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を実装できるのですが、表示の際にブラウザが固まってしまったりする事もあるのでちょっと注意が必要です。 いかがでしょうか?ご希望に添わなかったり不具合がある様でしたら補足して下さい。

noname#172293
質問者

お礼

>abrilさん いつもありがとうございます♪ HTMLを質問に盛り込めなくて(字数制限で)すみませんでした。 カンペキです! こうしたかったんです。 そうか、containerに背景色を指定して画像と併用するということに 思い至りませんでした! containerにもmin-width、必要ですね。 それと質問なのですが、 Footerにクリアプロパティを指定しないで#wrapにクリアフィクスを 指定するのはどういう理由からなんでしょう…? お時間のある時にでも宜しくお願いしますm(_ _)m

すると、全ての回答が全文表示されます。

その他の回答 (1)

  • abril
  • ベストアンサー率69% (388/560)
回答No.2

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

noname#172293
質問者

お礼

なるほど、私のwrapとfooterの間が空いてしまうな~と思っていたのは そのための不具合だったのですね! すっきりしました! 本当にどうもありがとうございました。

すると、全ての回答が全文表示されます。

関連するQ&A