- ベストアンサー
CSSでFirefoxのプレビューをかけると、下が空いてしまう現象（追記）
先ほど、質問させて頂きました問題に関しまして、簡単なレイアウトで再度新規にページを作成してみたところ、どうも、PCの縦幅よりも小さい値のページは、下が空いてしまうのではないかという気がしました。 レイアウトの構成は １．上部に「header」コンテナ ２．その下に「wrapper」コンテナ ３．その下（最下部）に「footer」コンテナ という構成で作成したところ、２．の縦幅が300pixのときは、このような現象が起こるが、２．の縦幅が800pixのときは起こりませんでした。 ソースコードは以下の通りです ■ html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link href="test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> id "header" の内容がここに入ります</div> <div id="wrapper"> id "wrapper" の内容がここに入ります-</div> <div id="footer"> id "footer" の内容がここに入ります</div> </body> </html> ■ CSS部分 body { margin: 0px auto; padding: 0px; } #header { margin: 0px auto; padding: 0px; height: 50px; width: 800px; background: #666666; } #wrapper { margin: 0px auto; padding: 0px; height: 300px; width: 800px; background: #FFFF00; } #footer { margin: 0px auto 5px; padding: 0px; height: 60px; width: 800px; background: #00FFFF; } です。 もし、予想通りPCの縦幅の問題だとしたら、 １．コンテンツの少ないページはどのように対処するのか？ ２．PCによって縦幅が異なるが、大きな画面サイズのＰＣでは、小さな画面サイズのＰＣで正しく表示されるものも、このように下が空いてしまうのか？ ３．これまでの推測は間違えで、別の考え方から、エラーになるのか？ をご教授いただけますと幸いで御座います。 月曜日の朝から、くだらない質問かもしれませんが、宜しくお願いします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
上記のCSSですと縦幅は410pxでマージンなどもしてもセンタリングしてるだけのようですから、ヘッダーの上に余白は出ませんよね。 上記のCSSだと 合計縦幅410pxで横幅800pxの横長の箱を画面上部ピッタリにセンタリングして配置するコーディングですから、モニターサイズが410px以上ある場合には当然フッターの下に余白が出来るは当然と思った方がいいです。 ＞１．コンテンツの少ないページはどのように対処するのか？ ケースバイケースです。 というかクライアント次第だったりします。 リキッドなサイトにするのかソリッドなサイトにするかもクライアントとこちらからの提案次第です。 ＞２．PCによって縦幅が異なるが、大きな画面サイズのＰＣでは、小さな画面サイズのＰＣで正しく表示されるものも、このように下が空いてしまうのか？ 一概にそうとは言えません。 もちろん上記CSSのように絶対数値を書き込むとそのサイズにモニター側が合わせますから足りない部分をスクロールを出しておぎなったり、逆に足りすぎてたら余白が出来てしまいます。 逆にこちらがモニターに合わせて相対数値でコーディングすれば大きいサイズでも小さいサイズでもレイアウト崩れや、余白を出さずに構築する事は可能です。(あまりにもブラウザのウィンドウを小さくすると崩れたりします) ＞３．これまでの推測は間違えで、別の考え方から、エラーになるのか？ ここまで話してくると分かると思いますが、そもそもエラーではありません。 上記のCSSがそのように表示するよう指示する記述となっています。 ちなみに margin: 0px auto 5px; の5pxって記述はわざとでしょうか？ これだと絶対下に5px分の余白出来ちゃいますよ。
その他の回答 (1)
- tenderfeel
- ベストアンサー率56% (215/379)
CSSではTableのようにheight:100%、height:auto等にしても、そういう表示にする段階を踏まない限り縦いっぱいの表示にはなりません。 つまりwrapperの内容が少ない（高さがない）場合に、ブラウザがそれより大きければfooterが浮いてしまうのは普通の振る舞いというわけです。 前の質問でclear:bothがあったということから、オリジナルは２カラムまたは３カラムレイアウトだったんじゃないかと思います。 そうなると、 [ header ] {[menu][contents]}←#wrapper [ footer ] という配置だと中身が少なくてもメニューが下に押すので フッターが上に上がるのを防げます。 １．コンテンツの少ないページはどのように対処するのか？ ＞メニュー等でブロックしたり、常に下に表示するという手法などで ２．PCによって縦幅が異なるが、大きな画面サイズのＰＣでは、小さな画面サイズのＰＣで正しく表示されるものも、このように下が空いてしまうのか？ ＞特に対処しなければ開いてしまいます ３．これまでの推測は間違えで、別の考え方から、エラーになるのか？ ＞ＣＳＳの知識が足りないだけと思います tableと同じ意識で書くとheight100%には出来ませんが、 height100%もfooterを常に下に表示することも可能です。 常に下に表示するサンプル▼ <style> * { margin:0; padding:0; } html,body { height:100%; min-height:100%; } #container { width:800px; margin:0 auto; position: relative; min-height: 100%; height: 100%; background: #FFFF00; } html > body #container { height:auto; } #header { margin: 0px auto; padding: 0px; height: 50px; background: #666666; } #footer { background: #00FFFF; bottom:0; position:absolute; width:100%; } </style> <body> <div id="container"> <div id="contents"> <div id="header"> id "header" の内容がここに入ります</div> <div id="wrapper">id "wrapper" の内容がここに入ります-</div> </div> <div id="footer"> id "footer" の内容がここに入ります</div> </div>
