CSS - 页脚间隙

Question

浏览器窗口和页脚之间的差距

 #footer
 {
 text-align:center;
clear:both;
background: url("images/footer.png") repeat-x #8DC63F;
width:100%;
margin:0;
}


.footer-text 
{
padding: 10px 0 0;
white-space:nowrap;
font-family:'Tahoma';
font-size:10pt;
color: #000000;
}

HTML：

<div id="footer">
<p class="footer-text">Home | Services | About Us | Products | Contact Us</p> 
<p class="footer-text">2011 &copy; All Rights Reserved.</p>
<p class="footer-text">&nbsp;</p>
</div>

帮我删除浏览器窗口和页脚之间的额外空间

Answer 1

尝试使用overflow：hidden in #footer。

另外，如果你给我们一个显示差距的URL会很棒。问题是有时CSS规则会影响多个元素，因此如果没有整个代码，很难确切知道是什么。

希望有所帮助。

Answer 2

可能是语法......

background: #8DC63F url("images/footer.png") repeat-x bottom center;

和

padding: 10px 0 0 0;

我还会删除不间断的空格段落，没有任何意义。如果您想在底部有更多空间，请在div中添加填充。不要使用空段落。

Answer 3

删除最后一个<p class="footer-text">&nbsp;</p>以消除差距。

Answer 4

我建议您使用单独的div或br清除浮动广告。这也可以解决你的问题。否则，删除页脚内的任何填充，看看这是否导致问题。

HTML

   <div class="clr"></div>
   <div id="footer">
      <p class="footer-text">Home | Services | About Us | Products | Contact Us</p> 
      <p class="footer-text">2011 &copy; All Rights Reserved.</p>
      <p class="footer-text">&nbsp;</p>
   </div>

CSS：

    .clr {
         clear:both;
     }