- ベストアンサー
CSSで、height:100%の中央寄せ
白い背景に、緑色の本文欄(id="container")を中央配置しようと思っています。 本文欄の上下に余白はなく、文章量に関係なく画面ぴったりの高さにするために、 html, body, containerのそれぞれにheight:100%、 親要素にmargin, padding 0を指定したところ、 画面をスクロールさせたところから緑色の背景色が消えています。 どのようにすれば解決できるのでしょうか？ *{ margin:0; padding:0; } html, body{height:100%;} #container { height:100%; width:800px; background-color:#0A0; margin:0px auto; }
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
#4 で既に指摘が入っていますが、min-heightプロパティが常道かなと。 --- <style type="text/css"> html,body{ height: 100%; } #container { min-height: 100%; height: auto !important; height: 100%; width: 800px; background-color: #0A0; margin: 0px auto; } </style> </head> <body> <div id="container"> <p>contents</p> </div> </body> </html> --- # IE用にCSSハックしてます。 CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 | CREAMU http://blog.creamu.com/mt/2008/03/cssminheighteasiest_crossbrows.html
その他の回答 (5)
- 4017B
- ベストアンサー率73% (1336/1814)
またまた補足です。 ━━Sample::Start━━━━━━━━━━━━━━━━━━━━━━━ <html> <head> <style type="text/css"> * { margin: 0; padding: 0; } html, body { margin: 0 auto; width: 800px; text-align: center; } table#container { width: 800px; height:100%; background-color: #0a0; } table#container > tr,td { text-align: left; vertical-align: top; } </style> </head> <body> <table id="container"><tr><td> コンテンツ文書など～<br> コンテンツ文書など～<br> コンテンツ文書など～<br> </td></tr> </table> </body> </html> ━━Sample::Endd━━━━━━━━━━━━━━━━━━━━━━━━ CSSの内容を上記の様に若干書き換えて下さい。 No.3のままだと「Tridentエンジン(IE系)」の時にちゃんと表示されません。 上記の例文の様にしておけば少なくとも。 ・IE ・Fire Fox ・Chrome ～の3つでは大丈夫なので問題無し？？ P.S. ＞バグ～ いやコレはバグじゃなくて仕様ですよ(笑)。 大前提としてタグやCSSも含めて「BODY要素の“背景色”にはwidthなどの幅指定が出来ない」のですから。 本来、こう言うことを実現するためには。 色指定じゃなくて“背景に画像”を指定して処理する様になっていると思われ…？まあ将来的にHTML5とかの拡張要素で、何らかの色幅指定とかが出来る様になるかも？？
お礼
ありがとうございます。 たしかにdivで色つけるのもテーブルで色つけるのも本来の目的に反している点は一緒ですね。 ひとまず画像を用いない場合はこの方法を使わせていただきます。
- freepacket
- ベストアンサー率46% (6/13)
#container に min-height:100%; を指定したらどうでしょうか？ height:100%は一旦消して。 min-height に対応していないブラウザ用に何らかのハックを仕込まないといけないと思いますが...
お礼
IE6以外であれば一番簡単ですね。 後はハックを考えないと・・・。
- 4017B
- ベストアンサー率73% (1336/1814)
<html> <head> <style type="text/css"> * { margin: 0; padding: 0; } html, body { margin: 0 auto; width: 800px; } #container { width: 100%; height: 100%; background-color: #0a0; } #container > tr,td { vertical-align: top; } </style> </head> <body> <table id="container"><tr><td> コンテンツ文書など～<br> コンテンツ文書など～<br> コンテンツ文書など～<br> </td></tr> </table> </body> </html> これで見かけ上は添付画像の様になります。 基本枠をtableで組んでるので、中身の文書の長短によって左右されることはありません。
お礼
この方法はうまくいきました。 ただせっかくCSSを使っているのにバグのせいでテーブルでレイアウトしなくてはならないのも奇妙な感じですね。
- 4017B
- ベストアンサー率73% (1336/1814)
すいません…勘違いしてました…。 No.1の書き方だと、文書が短い時には画面の下の方まで背景色がいきませんね。間違いです。 ちょっと考えてみます。tableで処理した方が簡単かも？？
- 4017B
- ベストアンサー率73% (1336/1814)
<html> <head> <style type="text/css"> * { margin: 0; padding: 0; } html, body { margin: 0 auto; height: 100%; width: 800px; } div#container { background-color: #0A0; } </style> </head> <body> <div id="container"> コンテンツ文書など～ </div> </body> </html> 以上、こんな感じでいいかな？ 後は環境に合わせて適当にアレンジして下さい。
お礼
!importantは思いつきませんでした。 これでやれば最も楽でいいですね。