DIV с «position: absolute; bottom: 0» не привязывается к дну контейнера в Firefox - PullRequest
Новая
       39

DIV с «position: absolute; bottom: 0» не привязывается к дну контейнера в Firefox

6 голосов
/ 06 сентября 2011

У меня есть этот источник 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 после нижнего колонтитула есть много пустого места.Что я делаю неправильно?Как это исправить?

Вот скриншот: Синяя подсветка - нижний колонтитул.

(Обратите внимание: «позиция: исправлена» - это не то, что я хочу;чтобы нижний колонтитул отображался внизу страницы, а не в окне браузера.)

Ответы [ 2 ]

6 голосов
/ 07 сентября 2011

Проблема в Firefox вызвана display:table. По сути, вы говорите Firefox обрабатывать этот элемент как таблицу.

В Firefox position:relative не поддерживается для элементов таблицы. Это не ошибка, так как в спецификации обработка position:relative элементов таблицы не определена.

Это означает, что в вашем примере нижний колонтитул располагается относительно окна, а не контейнера.

Одним из решений является использование display:block вместо этого или просто полное удаление правила display. Вы увидите, что нижний колонтитул опустится на свое законное место.

Вторым решением было бы обернуть другой контейнер без таблицы вокруг контейнера и установить вместо него position:relative.

Третий вариант - добавить position:relative к телу. Живой пример: http://jsfiddle.net/tw16/NbVTH/

body {
    padding: 0;
    margin: 0;
    position: relative; /* add this */
}
0 голосов
/ 06 сентября 2011

Какая у вас версия FF?В FF 6 он отображается правильно: http://screencast.com/t/zAjuG8FP99nX

Вы очистили кеш?Может быть, что-то осталось от предыдущих версий страницы.

Вы закрыли окно Firebug?Это поднимает содержимое при открытии.

Позднее редактирование: последняя строка означает: «после закрытия firebug полосы прокрутки исчезают, а div находится внизу»

...