質問: フッター部分にどうしても余白ができます。 下記のページを見てみてください。 yahooのジオシティーズを借りてますので変なページではありません。 http://www.geocities.jp/shiori1522/index.html フッター部分に、「copyright・・・・・」と記述があるところですが、 灰色のbackgroundを使ってます。 その灰色backgroundでフッターはぴったり終わってほしいのですが、 その下に、5mm程度でしょうか。余白が確認できます。 ブラウザによって異なるのかと思いましたが、 ie8、firefox、googleクローム、operaなどいずれも余白が出来ます。 事前に調べてもみましたが、 bodyにmargin 0を記述するとかもすでにやってますがうまくいきません。 どこを修正すればいいでしょうか? cssは、下記のurlにあります。 よろしくお願いいたします。 http://www.geocities.jp/shiori1522/main_10c_2c.css http://www.geocities.jp/shiori1522/container_10c_2c_topleft.css http://www.geocities.jp/shiori1522/user.css http://www.geocities.jp/shiori1522/hpbparts.css
回答: うーん、私も1時間以上悩んでしまいました(汗 どうやら、原因は2つあったようです。 [原因1] #hpb-container に clearfix が指定してある container_10c_2c_topleft.css に、『#hpb-container:after{...}』の部分があると思います。(42~48行目辺り) このスタイル指定を入れた意図はわかりませんが、私が見る限りは不要だと思います。 しかも、これがあることによって、フッターに余白を作ってしまっています。 これは削除していいと思います。 [原因2] geocities の画像型アクセス解析がページ下部に存在している geocities には、ページの最後に 1px×1px の画像を埋め込んで、アクセス解析をする機能があるようですが、 これがある為に、ページ下部に隙間ができてしまっています。 この画像を見えなくするために、以下の css をどこかに追加しましょう。 body > img {display:none;} (尚、画像を見えなくするようにしても、画像のリクエストは飛ぶので、アクセス解析に影響が出ることはありません。) 以上の2つを直せば、フッターはページ下部に密着します。 ご参考になれば幸いです。