DIV with “position:absolute;bottom:0” doesn't stick to the bottom of the container in Firefox

问题

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>

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?

Here's a screenshot: The blue highlight is the footer.

(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.)

回答1:

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

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.

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.

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

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 */
}

回答2:

What version of FF do you have? In FF 6 it displays correctly: http://screencast.com/t/zAjuG8FP99nX

Have you cleared the cache? Maybe there's something left from previous versions of the page.

Did you close the Firebug window? That pushes the content up when open.

Later edit: the last line means: "after you close firebug, scrollbars disappear and div is at the bottom"

来源：https://stackoverflow.com/questions/7321798/div-with-positionabsolutebottom0-doesnt-stick-to-the-bottom-of-the-contain

标签

html

css

firefox

positioning