0

何らかの理由で、Firefox と Internet Explorer のスティッキー フッターの下に余分な空白 (約 1 ピクセル) が表示されます。ただし、Chromeでは問題なく表示されます。

次の HTML 構造を使用しています。

<div id="wrap">

    <header><p>Header</p></header>

    <div id="main">
        <p>Content here...</p>
    </div>

    <footer><p>Footer</p></footer>

</div>

CSS:

html, body {
    height: 100%;
}

#wrap {
    min-height: 100%;
    position: relative;
}

#main {
    padding: 20px 0 120px 0; /* padding-bottom must be same height as the footer */
    position: relative;
}

footer {
    position: absolute;
    bottom: 0px;
    height: 100px;
}

JSFiddle デモ(問題がすぐに表示されない場合は、ウィンドウのサイズを変更してみてください)

何が原因なのかさっぱりわかりません。Firebug は、その空白に要素を表示しません。

4

1 に答える 1

1

overflow:hiddenコンテナに追加

また

bottom:0px丸め (天井/床) の問題により、bottom:1px と解釈されることがあります。

これはどのブラウザーでも発生しませんが、msie では発生するようです

于 2013-08-05T09:06:19.353 に答える