FF 和 IE 中粘滞页脚下方的额外空白答案

【问题标题】：Extra whitespace below sticky footer in FF and IEFF 和 IE 中粘滞页脚下方的额外空白
【发布时间】：2015-05-07 22:27:50
【问题描述】：

由于某种原因，我在 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 demo（如果问题不立即可见，请尝试调整窗口大小）

我就是不知道是什么原因造成的。 Firebug 不会在该空格中显示任何元素。

【问题讨论】：

标签： google-chrome firefox whitespace footer

【解决方案1】：

将overflow:hidden 添加到容器中

还有

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

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

【讨论】：