html - 消除页脚下空白的问题

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

您添加字体大小：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

问题在这里：</p>

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 来修复错误。您将使用另一种清晰的浮动方法：

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

想知道方法请点这里：<a href="http://www.w3cplus.com/css/clear-float" rel="nofollow">清除浮动