«

»

2008年5月26日

Firefoxでフッター（footer）の下に隙間ができる

Filed under: CSS — admin @ 1:12 AM

■原因として考えられるもの

clearfixハック

■解決策（CSSソース）

.clearfix:after {
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
    font-size: 0;/*これで解決させる*/
}

とする

■解説

afterでコンテンツ（上記の場合は『.』）を追加した分、（hight:0であるが）内部的に高さが増す。フッターにclearfixハックを使っている、もしくは他の要素でclearfixを使い内部的に高さが増した量よりフッターの高さが小さい時にフッタの下に隙間が出来るが、上記のafterで追加した要素のフォントサイズを0にすることにより、追加した要素の高さを完全に０にする。

■追記

但し、スパムとみなされる可能性もある気がするので、フォントサイズはかなり小さめの0以外の値を設定した方がイイかもしれない。

.clearfix:after {
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
    font-size: 0.1em;
}

2件のコメント »

  1. すごく役立ちました

    ありがとうございますm(_ _)m

    コメント by 通りすがり — 2009 年 4 月 29 日 @ 9:31 PM

  2. いえいえ。
    お役に立てましてなによりです☆

    今後とも宜しくお願いいたします。

    コメント by admin — 2009 年 4 月 29 日 @ 9:48 PM

この投稿へのコメントの RSS フィード。 TrackBack URL

コメントする