消除页脚下空白的问题答案

【问题标题】：Problems eliminating white space under footer消除页脚下空白的问题
【发布时间】：2013-06-05 15:50:05
【问题描述】：

我一直在 Firebug 中检查我的页脚，但似乎看不到导致我的页脚下方有空白区域的问题。如果有人可以快速浏览一下，那就太好了。谢谢！

www.jobspark.ca

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

更新因此，我在下面接受的答案已经解决了所有浏览器中的问题，除了我在 IE 9 中查看时。我需要向 css 添加什么才能与 IE 一起使用。

【问题讨论】：

是的，IE9 有某种 JS 会覆盖 clearfix 样式。

标签： html css web footer

【解决方案1】：

这是我这几天使用的 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;
}

【讨论】：

感谢这工作，但当我在 IE 中查看时仍然有空白。我是否需要在这个 css 中添加一些东西来帮助 IE。我用IE9查看过
不幸的是，您页面上的某种 JavaScript 正在禁用 IE9 中的样式。如果在IE9中关闭JS，代码就可以了。
哦，我明白了。我只有几行 JavaScript，但会检查它们是否需要。谢谢

【解决方案2】：

问题很清楚，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;
}

【讨论】：

好的，感谢您找到它。我需要对 Height:0 做什么;
看另一个答案，基本上使用不同的clearfix方法。

【解决方案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;**
}

【讨论】：

不客气，你应该对去浮的原理和方法有更多的了解。(^_^)

【解决方案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 来修复错误。你会得到另一个明确的浮动方法：

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

如需了解方法请点击：clear float

【讨论】：

对不起，我不能让它工作......你能再次清除你的答案，然后重新插入我需要添加的 css。谢谢