Question

我注意到我的网页在页脚后面和页面底部有一个空格/栏：

enter image description here

我试图通过在Chrome中使用inspect元素找到原因并且无法找到任何内容。我使用的是Boostrap，这是我的页脚HTML / CSS：

 <div class="container">
    <hr>
  </div> <!--end container-->
  <div id="footer">
    <footer class="container">
      <div class="row">
        <div class="col-md-3" id="mail"> <a href="mailto:info@8delfiini.ee" title="Kirjuta mulle!"><img src="images/mail.png" alt="e-kiri" title="Kirjuta mulle!"/></a>
          <p><a href="mailto:info@8delfiini.ee">info@8delfiini.ee</a></p>
        </div>
        <div class="col-md-3" id="tel"> <a href="tel:+3725299131" title="Helista mulle!"><img src="images/phone.png" alt="telefon" title="Helista mulle!"/></a>
          <p><a href="tel:+3725299131">(+372) 52 99 131</a></p>
        </div>
        <div class="col-md-3" id="addr"> <a href="https://goo.gl/maps/ny3wV" title="Asukoht" target="_blank"><img src="images/location.png" alt="asukoht" title="Asukoht"/></a> <a href="https://goo.gl/maps/ny3wV" title="Asukoht" target="_blank">
          <p>Jansuki Shop<br />
            Müürivahe 17<br />
            Tallinn </p>
          </a> </div>
        <div class="col-md-3" id="fb"> <a href="https://www.facebook.com/8Delfiini" title="Facebook" target="_blank"><img src="images/fb.png" alt="Facebook" title="Facebook"/></a> <a href="https://www.facebook.com/8Delfiini" title="Facebook" target="_blank">
          <p>8 Delfiini Facebookis</p>
          </a> </div>
      </div>
      <!--end row--> 
    </footer>
  </div>
  <!--end footer-->

整个联系页面的CSS：

 /*kontakt*/

#kontakt
{
    background: url(../images/IMG_1340.jpg) no-repeat fixed;
    width: 100%;
    margin-bottom: 0;
}

h2.cont-heading
{
    background: url(../images/kontakt.png) no-repeat 0 155px;
    background-size: 48.5px 53px;
    padding: 160px 0 5px 60px;
    color: rgb(255,255,255);
    text-transform: uppercase;
}

h1.invitation
{
    font-family: 'latoregular', sans-serif;
    color: rgb(255,255,255);
    font-size: 7em;
}

#logo
{
    width: 28px;
    height: 40px;
    margin-top: 10px;
}

#part3, #part4
{
    padding: 40px 40px 40px 0;
}

#part4
{
    padding: 30px;
    color: rgb(255,255,255);
}

hr
{
    border: 0;
    height: 1px;
    margin: 0;
    background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.4), rgba(255,255,255,0.75), rgba(255,255,255,0.4));
    background-image: -moz-linear-gradient(left, rgba(255,255,255,0.4), rgba(255,255,255,0.75), rgba(255,255,255,0.4));
    background-image: -ms-linear-gradient(left, rgba(255,255,255,0.4), rgba(255,255,255,0.75), rgba(255,255,255,0.4));
    background-image: -o-linear-gradient(left, rgba(255,255,255,0.4), rgba(255,255,255,0.75), rgba(255,255,255,0.4));
}

/*footer styles*/

#footer
{
    padding: 40px;
    color: rgb(255,255,255);
    text-align: center;
}

#footer a
{
    color: rgb(255,255,255);
    font-size: 1.3em;
}

#mail img, #tel img, #addr img, #fb img
{
    height: 60px;
    width: 60px;
    display: block;
    margin: 0 auto;
}

#mail a, #tel a, #addr a, #fb a
{
    padding: 50px;
    font-family: 'latoregular', sans-serif;
}

我是Bootstrap的新手。它的CSS中可能有一些特殊的东西会导致这种情况吗？谢谢您的帮助。：）

Answer 1

您可以通过为#footer .row设置填充来解决此问题：

#footer .container .row {
    padding-bottom:8px;
}

^{_{漂亮的布局btw：）}}

Answer 2

这种事情主要与不设定身体风格有关：

body
{
margin: 0;
padding: 0;
}

您也可能错误地设置了其他元素的高度。重置所有预定义样式是一种很好的做法，请参阅http://www.cssreset.com/

只是为了确定;你的背景图片够大，对吧？

页面底部的空白/栏

2 个答案: