DIV with “position:absolute;bottom:0” doesn't stick to the bottom of the container in Firefox
Question
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"> </div>
<div class="footerBar"> </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.)
2 answers
solution1
6 ACCPTED 2011-09-06 21:49:19
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 */
}
solution2
0 2011-09-06 15:46:37
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"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.