Firefox CSS位置问题

Question

我在页脚div的位置上遇到问题，该页脚应该将div中的所有内容固定到页面底部。 它可以在Chrome，IE和Edge等系统上运行。但是在Firefox上，这是有问题的，因为div内容无法停留在页面底部。

我认为对您自己来说更容易些，因此这里是指向相关页面的链接，您可以据此做出判断并希望对此有所帮助。

您会在页面上看到淡入淡出的“新闻：”一词。

http://goo.gl/xOg4uN

这是CSS，但是：

* {margin:0;padding:0;} 
html, body {height: 100%;}
#wrap {min-height: 100%;}

#main {
overflow:auto;
padding-bottom: 180px; /* must be same height as the footer */
}

#footer {
position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear:both;
} 

/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}

Answer 1

由于您的#footer是相对于其他div的，并且您是按边距属性定位#footer的，因此Firefox不会像您期望的那样进行计算。

以下代码适用于所有浏览器：

#footer{
  position: absolute;
  bottom: 0px;
}