Question

出于某种原因，我在Firefox和Internet Explorer的粘性页脚下得到了一些额外的空白（大约1px）。虽然它在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 demo（如果问题无法立即显示，请尝试调整窗口大小）

我无法弄清楚造成它的原因。 Firebug没有在那个空格中显示任何元素。

Answer 1

将overflow:hidden添加到容器

也

bottom:0px有时被解释为底部：1px因为舍入（ceil / floor）问题

在任何浏览器中都不会发生，但显然发生在msie上

FF和IE中粘性页脚下面的额外空格

1 个答案: