...">
All geek questions in one place

DIV with "position: absolute; bottom: 0" does not 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 should appear at the bottom of the page, and this is done in Opera and Chrome; However, in Firefox there is a lot of empty room after the footer. What am I doing wrong? How to fix it?

Here is a screenshot: The blue backlight is the footer.

(Note: “position: fixed” is not what I want, I want the footer to be displayed at the bottom of the page, and not in the browser window.)

+6
source share
2 answers

The problem in Firefox is caused by display:table . Essentially, you are saying that Firefox treats this element as a table.

In Firefox, position:relative not supported on table elements. This is not a mistake, although, as in the specification, the processing of position:relative table elements is undefined.

This means that in your example, the footer is relative to the window, not the container.

One solution is to use display:block instead, or simply remove the display rule completely. You will see that the footer drops to its rightful place.

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

The third option is to add position:relative to the body. Example: http://jsfiddle.net/tw16/NbVTH/

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

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

Did you clear the cache? Something may be left over from previous versions of the page.

Have you closed the Firebug window? This pushes the contents up when opened.

Then edit: the last line means: "after you close firebug, the scroll bars disappear and the div is at the bottom"

0
source

Source: https://habr.com/ru/post/896722/

More articles:


All Articles