具有“位置：绝对；底部：0”的DIV在 Firefox 中不会粘在容器底部
我有这个 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"> </div>
<div class="footerBar"> </div>
</div>
</body>
</html>
页脚应该出现在页面底部，在 Opera 和 Chrome 中也是如此；然而，在 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"> </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.)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
Firefox 中的问题是由
display:table引起的。本质上，您是在告诉 Firefox 将此元素视为表格。在 Firefox 中，表元素不支持
position:relative。但这并不是一个错误，因为在规范中，position:relative表元素的处理是未定义的。这意味着在您的示例中，页脚是相对于窗口而不是容器定位的。
一种解决方案是使用
display:block代替，或者完全删除display规则。您会看到页脚将下降到正确的位置。第二种解决方案是在容器周围包裹另一个非表 div，并将
position:relative设置为该值。第三个选项是将
position:relative添加到正文。实例：http://jsfiddle.net/tw16/NbVTH/The issue in Firefox is caused by
display:table. Essentially you are telling Firefox to treat this element as a table.In Firefox
position:relativeis not supported on table elements. It isn't a bug though, as in the spec the treatment ofposition:relativetable 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:blockinstead or just remove thedisplayrule 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:relativeto that instead.A third option is to add
position:relativeto the body. Live example: http://jsfiddle.net/tw16/NbVTH/你的FF是什么版本的？在 FF 6 中正确显示：http://screencast.com/t/zAjuG8FP99nX
您清除了缓存吗？也许该页面的先前版本留下了一些内容。
你关闭Firebug窗口了吗？这会在打开时将内容推高。
稍后编辑：最后一行的意思是：“关闭firebug后，滚动条消失并且div位于底部”
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"