締切済み

Firefoxでheight:100%がきかない？

2009/07/29 16:20

ソースは以下のとおりです。 IEでは#container内のDIV要素は全てheight:100%で表示されるのですが、Firefoxでは、高さ：100％がききません。 Firefoxでもページの下まで表示されるようにしたいと思います。よろしくお願いいたします。 <!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=UTF-8" /> <title>サンプル</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>あああ</h1> </div> <div id="container"> <div id="container_left01"> <div id="container_left02">あああ</div> <div id="container_left03">あああ</div> </div> <div id="container_right01">あああ</div> </div> </div> </body> </html>

sdfxjp
お礼率100% (7/7)

HTML
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

みんなの回答

abril
ベストアンサー率69% (388/560)

2009/07/30 17:25 回答No.3

No.2です。 No.2でのサンプルでIE6の挙動に不具合がありましたので、一部修正させて頂きます。 /*ラッパー*/ #wrapper { （省略） margin: 0 0 -123px 0; _margin-bottom: 0;←追加（省略） } IE6ではこのハックを追加する事で”コンテンツ量がウィンドウサイズの高さに満たない”場合は丁度123px分の余分なスクロールが発生してしまうのですが、-123pxのままだと”コンテンツ量がウィンドウサイズの高さを超えた”場合に下部123px分が表示されませんでしたので…

質問者

お礼 2009/07/30 21:52

いつもありがとうございます。 IE6以下用ハックですね。ブラウザ毎の表示の差異は本当にどうにかしてほしいものです…。

abril
ベストアンサー率69% (388/560)

2009/07/29 19:03 回答No.2

多分これは以前回答させて頂いた【質問番号：5105806】の発展系だと思うのですが。先のコンテンツはヘッダーなしの左右2カラム構成でしたから、その考え方を今回のヘッダー＋3カラム構成にカスタイマイズしたのだと思いますが、高さ関係の処理が適切ではありません。＃heightは勿論、IE以外でも使えます。使い方を適切にしなければいけないだけです。以下の改良版を試してみて下さい。 ---------------------------------------------------------------------- <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <title>サンプル</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>ヘッダー</h1> </div> <div id="left"> <p>左カラム最初</p> （この間のテキストを適当に増減してスクロールやカラムの挙動を確認して下さい） <p>左カラム最後</p> </div> <div id="center"> <p>中央カラム最初</p> （同上） <p>中央カラム最後</p> </div> <div id="right"> <p>右カラム最初</p> （同上） <p>右カラム最後</p> </div> </div> </body> </html> ---------------------------------------------------------------------- 「以前のものを応用するなら」ですが：・wrapperの中に更にcontainerを設ける必要はない・3コラムにするのに左と中央カラムだけを内包する親要素を更に作る必要はない。 wrapperの直下にleft、center、rightのカラムのを同条件で作り、それぞれfloatをleft・left・rightにすればいい。・headerの高さ123px分をwrapperの下マージンをマイナスにして相殺する。といった修正で済みます。不具合ありましたら具体的に補足して下さい。

質問者