- ベストアンサー
ページ下部のDIV要素下部に不要な余白
お世話になります。 早速ですが、以下のようなＨＴＭＬを記述しました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <style type="text/css"> *{ margin:0px; padding:0px; } html,body{ height:100%; width:100%; background-color:#FFFFFF; } #wrapper_out{ margin:0px auto; width:100px; background-color:#FFCCFF; } #bottommarginbox{ height:5px; width:5px; background-color:#66FFFF; margin:0px auto; } </style> </head> <body> <div id="wrapper_out"> 改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br> 改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br> 改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br> 改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br> 改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br>改行<br> </div> <div id="bottommarginbox"></div> </body> </html> ※上記のＨＴＭＬソースはあくまでも事象確認用にコーディングしたものです。 改行が多数入っているので、表示させるとブラウザに縦スクロールバーが出現します。この状態ではdiv#bottommarginboxがページ最下部にくっついて表示されると予想していたのですが、WindowsXPのIE6とIE7ではいずれもdiv#bottommarginbox（ページ最下部の水色の小さな四角）の下に謎の余白が発生します。 ちなみにFireFox2、Opera9、Safari3ではいずれもこの事象は発生しませんでした。 なんとなくＩＥのバグっぽくはあるのですが、対処方法などご教授いただければ幸いです。よろしくお願いします。
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
ANo.2、4です。 divの解釈の違いというかIEのバグかと思います。 最初の回答の内容は、スクロールバー下にびみょ～な隙間があったので、そのことかと思いましたが、よく見るとdiv#bottommarginboxの高さがFirefoxとIEで違うことに気づきました。 計ってみたら、IEでは5pxの指定にもかかわらず、18pxほどありました。 IEの場合、１文字分の高さをデフォルトでもってしまっているようです。 なので、高さを5pxに設定し、溢れた分を表示しない ⇒overflow:hidden; でdivの高さがIEでも利くということになります。
その他の回答 (5)
A no3です。 投稿した後に補足がついていました。ちょっと私の投稿が早すぎたのでしょうか。それなら見えています。marginboxに色まで指定しておられるのでこの水色の存在を許した上でその下に空白があるのかと思いました。 疑問に思うのは、およそ１行分の空白があるのが許せないのでしょうか。マージンボックスを入れたなら、そしてそれに色をつけたならその水色の空白が生じるのは自然なので、もし空白を入れたくなかったらmarginbooxの記述を削除してやれば文字の下の空白はなくなりますけどそれでは回答にならないのでしょうか。なお、最後の「改行」の後に<br>を入れておられますが、これはあってもなくてもIEでは同じ結果のようです。IE6の環境で言えば、もしこのような避けたい空白が下に生じた場合、私なら対象のものを position:relative; top:10; などとしてやりますが、でもそれはhtmlの一番下では表示にブラウザの違いなどがあるでしょうからヤバイと思います。
お礼
ご回答ありがとうございます。 No.4にていただいたご回答にて一応の解決を見ました。 ちなみに私が期待した結果はマージンボックス（水色の四角）がブラウザの下端にぴったりつくことでした。ところがＩＥの場合、水色の四角の下端とブラウザの下端との間に余白ができてしまったことを不満に感じておりました。 わかりづらい質問内容となってしまい、ご迷惑おかけしました。
ANo.2です。 スクロールバーの下の微妙な隙間じゃなくて、divの解釈の違いだったんですね。 #bottommarginbox{ height:5px; width:5px; background-color:#66FFFF; margin:0px auto; overflow:hidden; } で試してください。IE6では確認済みです。 IE7環境は今無いので確認できません。
お礼
ご回答ありがとうございます。 上記を試してみたところ、ＩＥ６ＩＥ７ともに謎の余白はなくなりました。 ありがとうございました。 ちなみにdivの解釈の違いとはどのようなものなのでしょう？ ある程度の高さがあらかじめ設定されてしまっているということでしょうか？
こんにちは。 私の環境はIE6です。コーディングはいつもメモ帳を使っています。 回答というより実証報告になりますが、私の環境でご質問を丸写しして再現してみるとご質問のような問題は発生しません。bottommarginboxに文字を入れて更にwidth heightも色々変化させて見ましたが謎の余白（heightはどれくらいなのか？）は現れず、新しい記述の通りの変化が生じますから私の環境では問題はないようです。 従ってIEのバグの疑いはないと思います。 ひょっとしてこのhtmlファイルを外部CSSに関連付けておられませんか。 また、このような時に私がよくしているのは関係のありそうな記述を上のように色々に変化させてどのような結果が生じるかで問題のありかをつかもうとします。（すでにやっておられるとは思います、失礼） 回答しようとしてA no2の方の投稿に気付きました。 それで解決、ということになると思いますが、それでもこの回答は無意味でもないと思うので、このまま投稿させて頂きます。
補足
ご回答ありがとうございます。大変勉強になりました。 なお、外部ＣＳＳへの関連付け等はないことは確認しています。 謎の余白についてですが、No1のご回答に補足を記載させていただきました。 お手数ですがご一読いただければ幸いです。
html,body{ height:100%; width:100%; background-color:#FFFFFF; } ↑ここに border:0; を追加すると余白がなくなりました。 今まで全く気にしてなかったので勉強になりました。
補足
ご回答ありがとうございます。 謎の余白についてですが、ご回答いただいたものとは異なるようです。 No1のご回答に補足を記載させていただきました。 お手数ですがご一読いただければ幸いです。
- goldfox
- ベストアンサー率49% (123/249)
その謎の余白はもしかして1pxほどのものですか？ （もしかしてブラウザの枠のことかと…？） bodyの背景色を#666666など色ありにしても余白（水色の下に灰色）が入りますか？
補足
ご回答ありがとうございます。 謎の余白についてですが、１ｐｘよりも大きなものです。 ひょっとしたら私の環境だけなのでしょうか・・・
お礼
ご回答ありがとうございます。大変勉強になりました。 たしかに１文字分くらいの高さなので念のためline-heightを試してみたのですが、line-heightの指定ではまったく事象が変わりませんでした。 大変助かりました。ありがとうございました。