Question

我有这个HTML源代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Stylish Web Page</title>
        <style type="text/css">
            body { padding: 0; margin: 0; }
            div.table { display: table;}
            div.tableRow { display: table-row;}
            div.tableCell { display: table-cell;}
            div.contentWrapper { width: 100%; height: 760px; position: relative;
                margin: 0 auto; padding: 0; }
            div.footerBar { width: inherit; height: 60px; background-image: url("BarBG.png");
                background-repeat: repeat-x; position: absolute; bottom: 0; }
        </style>
    </head>
    <body>
        <div class="table contentWrapper">
            <div class="tableRow">&#160;</div>
            <div class="footerBar">&#160;</div>
        </div>
    </body>
</html>

页脚应该出现在页面的底部，它在Opera和Chrome中都是这样;但是，在Firefox中，页脚后面有很多空房间。我究竟做错了什么？如何解决？

以下是截图：The blue highlight is the footer.

（请注意：“position：fixed”不是我想要的;我希望页脚显示在页面底部，而不是浏览器窗口。）

Answer 1

Firefox中的问题是由display:table引起的。基本上你是在告诉Firefox把这个元素当作一个表。

在Firefox中，表元素不支持position:relative。这不是一个错误，因为在规范中position:relative表元素的处理是未定义的。

这意味着在您的示例中，页脚相对于窗口而不是容器定位。

一种解决方案是使用display:block代替，或者只是完全删除display规则。您将看到页脚将下降到正确的位置。

第二个解决方案是在容器周围包装另一个非表格div，然后将position:relative设置为。

第三种选择是将position:relative添加到正文中。实例：http://jsfiddle.net/tw16/NbVTH/

body {
    padding: 0;
    margin: 0;
    position: relative; /* add this */
}

Answer 2

你有什么版本的FF？在FF 6中，它正确显示：http://screencast.com/t/zAjuG8FP99nX

你清除了缓存吗？也许从以前版本的页面中还剩下一些东西。

你关闭了Firebug窗口吗？这会在打开时推动内容。

稍后编辑：最后一行表示：“关闭萤火虫后，滚动条消失，div位于底部”

带有“position：absolute; bottom：0”的DIV不会粘贴在Firefox的容器底部

2 个答案: