- ベストアンサー
背景色設定時のdivの高さ100%表示とピクセル指定の違いについて
- divを使って背景色を設定した際、高さ100%表示とピクセル指定の違いが問題となります。
- ピクセル指定の背景は、スクロールバーが出た場合でも指定された高さまで背景色が表示されますが、100%表示指定の背景はウィンドウで隠れた部分で切れてしまいます。
- 解決策として、min-heightを追加することで問題を解決できると言われていますが、正しく表示されない問題が発生しています。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- dscripty
- ベストアンサー率51% (166/325)
[ANo.2] への補足に対する回答ね。 「この理由から察すれば、やはり画面から隠れた部分にまで高さ一杯の背景色をdivに塗ることはできないという事ですよね？」 ↓こうゆうこと？ <!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" xml:lang="ja"> <head> <title>css min-height を使ってみる</title> <style type="text/css"> html, body { height:100%; margin:0; padding:0; } #test1 { min-height:100%;width:50%; float:left; background-color:#cccccc; } #test1 > p { padding:1em; margin:1em; } #test2{ float:right; height:100px; width:50%; background-color:#ccccff; } </style> </head> <body> <div id="test1"> <p>#test1</p> <p>#test1</p> <p>#test1</p> <p>#test1</p> <p>#test1</p> <p>#test1</p> <p>#test1</p> <p>#test1</p> <p>#test1</p> <p>#test1</p> <p>#test1</p> <p>#test1</p> </div> <div id="test2"> <p>#test2</p> </div> </body> </html>
お礼
ありがとうございました。 ただ、今回はテキストの表示はない状態をイメージしていました。 説明が足りず申し訳ございませんでした。
- dscripty
- ベストアンサー率51% (166/325)
対処は出たから、理由を説明するね。 (1) #test1 div { height:100%; } のとき (ブラウザの高さ) = (bodyの高さ) = (divの高さ) だから、はみ出たら表示されない。 (2) #test2 div { height:800px; } のとき、今回の場合は (ブラウザの高さ) = (bodyの高さ) < (800px=divの高さ) だから、800px までは画像が表示されるけど、 画像の高さが 800px を超えたら、その超えた部分は表示されない。
補足
ご丁寧な説明ありがとうございました。 この理由から察すれば、やはり画面から隠れた部分にまで 高さ一杯の背景色をdivに塗ることはできないという事ですよね？
- t_ohta
- ベストアンサー率38% (5410/14073)
min-height を 100% ではなく 800px にすれば背景が塗られると思います。
補足
ご回答ありがとうございました。 左側のdivの背景色をピクセル指定ではなく、常に画面の高さ一杯に表示させる事は不可能なのでしょうか？ min-heightにしますと、結局右側の背景と全く同じものになってしまいますので、 意図している表示にはなりませんでした。。
お礼
まさにイメージ通りです！ こんなやり方は全く思いつきませんでした。 本当にありがとうございました。