DIV，其中“位置：绝对;底部：0”在Firefox中不会粘到容器的底部

问题描述：

我有这个HTML来源：

I have this HTML source:

<!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 footer is supposed to appear at the bottom of the page, and it does so in Opera and Chrome; However, in Firefox, there's a lot of empty room following the footer. What am I doing wrong? How to fix it?

这是屏幕截图：蓝色突出显示的是页脚。

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

(Please note: "position: fixed" is not what I want; I want the footer to show up at the bottom of the page, not the browser window.)

答

Firefox中的问题是由 display：table 。基本上你是告诉Firefox将这个元素当作一个表。

The issue in Firefox is caused by display:table. Essentially you are telling Firefox to treat this element as a table.

在Firefox position：relative 表元素。这不是一个bug，因为在规范中 position：relative 表元素的处理未定义。

In Firefox position:relative is not supported on table elements. It isn't a bug though, as in the spec the treatment of position:relative table elements is undefined.

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

This means that in your example the footer is being positioned relative to the window and not the container.

一个解决方案是使用 display：block ，或者完全删除 display 规则。

One solution is to use display:block instead or just remove the display rule entirely. You will see the footer will drop down to its rightful place.

第二个解决方案是将另一个非表格div包装在容器周围，并设置

A second solution would be to wrap another non-table div around the container and set position:relative to that instead.

第三个选项是添加 position：relative 到身体。实例： http://jsfiddle.net/tw16/NbVTH/

A third option is to add position:relative to the body. Live example: http://jsfiddle.net/tw16/NbVTH/

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

DIV，其中“位置：绝对;底部：0”在Firefox中不会粘到容器的底部

相关推荐