Question

我正在完成一个网站thebarn.psone.ca但是页面底部有一个20px的空白区域，我无法摆脱它。它出现在html和body元素之后。帮助将不胜感激。

我会尽力让这对下一个人有意义。知道这是drupal tao主题的产物可能会有所帮助。我的HTML看起来像：

<html>
<body>
<div id='page'><div class='limiter clearfix'>
    <div class="content"></div>
</div>
</body>
</html>

我的css：

.content {
    background: #CCCCCC;
    height: 1090px;
    width: 100%;    
}

.clearfix:after {
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  content: ".";
}

这给了我从页面底部看到的灰色20px，在firebug中，看起来html和body元素之后有空白区域。但删除内容：“。”;来自clearfix之后，如下面的帖子所述，解决了问题

Answer 1

从content: ".";课程中删除.clearfix:after。

Answer 2

这是由于您的div.limiter.clearfix:after，请参阅：

here

从我所看到的情况来看，如果你移除content: ".";它可能会修复它，否则你需要摆弄height / font-size / overflow。

html后额外20px

2 个答案: