Menu
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.)
751
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 */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
