在页脚下消除空白的问题

Question

我一直在检查Firebug中的页脚，似乎无法看到导致我的页脚在其下面留下空白的问题。如果有人可以快速看一下会很棒。谢谢！

www.jobspark.ca

#page-footer-wrapper {
border-top: 1px solid #e6e6e6;
background: #000;
color: #fff;
width: auto;
margin: 0;
}

更新 所以下面我接受的答案已经解决了所有浏览器中的问题，除非我在IE 9中查看。我需要添加到css中以便它可以与IE一起使用。

Answer 1

问题在于您的明确height:0;属性。

header:after, section:after, article:after, footer:after, #navigationtop:after, #navigation-bottom:after, #page-header-wrapper:after, #banner-area-wrapper:after, #page-body-wrapper:after, #page-footer-wrapper:after, .clearer:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}

Answer 2

这是我最近使用的clearfix方法：

header:after,
section:after,
article:after,
footer:after,
#navigation-top:after,
#navigation-bottom:after,
#page-header-wrapper:after,
#banner-area-wrapper:after,
#page-body-wrapper:after,
#page-footer-wrapper:after,
.clearer:after {
  content: "";
  display: table;
  clear: both;
}

Answer 3

你添加font-size：0，就像这样：

header:after, section:after, article:after, footer:after, #navigation-top:after, #navigation-bottom:after, #page-header-wrapper:after, #banner-area-wrapper:after, #page-body-wrapper:after, #page-footer-wrapper:after, .clearer:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
**font-size: 0;**
}

Answer 4

问题在这里：

header:after, section:after, article:after, footer:after, #navigation-top:after, #navigation-bottom:after, #page-header-wrapper:after, #banner-area-wrapper:after, #page-body-wrapper:after, #page-footer-wrapper:after, .clearer:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

你将添加font-size：0来修复bug。你将另一个明确的浮动方法：

.clearfix:before,
.clearfix:after {
   content:"";
   display: table;
}
.clearfix:after{
  clear:both;
  overflow: hidden;
}
.clearfix{
  zoom: 1;/*for ie6*/
}

如果您想了解该方法，请点击此处：clear float