[英]White space/ bar at the bottom of the page
I noticed that my web page has a white space/bar right after the footer and at the bottom of the page: 我注意到我的网页在页脚后面和页面底部有一个空格/栏:
I tried to find the cause of this by using the inspect element in Chrome and can't find anything. 我试图通过在Chrome中使用inspect元素找到原因,但无法找到任何内容。 I'm using Boostrap and here's my footer HTML/CSS:
我正在使用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-->
And the CSS for the whole contact page: 以及整个联系页面的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;
}
I'm new to Bootstrap. 我是Bootstrap的新手。 Is there maybe something special in its CSS that causes this?
它的CSS中可能有一些特殊的东西会导致这种情况吗? Thank you for your help.
谢谢您的帮助。 :)
:)
You can fix it by setting a padding for the #footer .row: 您可以通过为#footer .row设置填充来修复它:
#footer .container .row {
padding-bottom:8px;
}
Beautiful layout btw :) 美丽的布局顺便说一句:)
This kind of things has mostly to do with not setting the body style: 这种事情主要与不设置身体风格有关:
body
{
margin: 0;
padding: 0;
}
It can also happen that you have set the heights of other elements wrongly. 您也可能错误地设置了其他元素的高度。 It's a good practice to reset all the predefined styles, see http://www.cssreset.com/
重置所有预定义样式是一种很好的做法,请参阅http://www.cssreset.com/
And just to be sure; 只是为了确定; your background image is big enough, right?
你的背景图像足够大吧?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.