我遇到了很大的麻烦,为什么我的页脚下有空隙(我尝试了一个固定的页脚,但它不允许我滚动页面)如果你有答案,请发布。我很迷惑。
问候。
(感谢编辑添加我的图片,不幸的是我需要10个代表)
图片:http://i.gyazo.com/eed1a75737fd1f80a2160148aac30cff.png
我完全忘记了代码!天啊。我很尴尬。
footer div.footer-ribbon:before {
border-right-color: #7f0000;
}
footer div.footer-ribbon:before {
border-right: 10px solid #7f0000;
border-top: 16px solid rgba(0, 0, 0, 0);
content: "";
display: block;
height: 0;
left: -10px;
position: absolute;
top: 0;
width: 7px;
}
footer div.container div.row > div {
margin-bottom: 25px;
}
footer div.footer-ribbon {
background: #cc0000;
margin: -100px 0 0 30px;
padding: 10px 20px 6px;
position: absolute;
color: #ffffff;
font-weight: 700;
}
footer div.footer-ribbon span {
color: #ffffff;
font-weight: 700;
}
footer {
background: #121214;
border-top: 4px solid #1F1F1F;
font-size: 0.9em;
padding: 80px 0 0;
padding-bottom: 0;
position: relative;
}
<footer id="footer">
<div class="container">
<div class="row">
<div class="footer-ribbon" style="right: 0">
<h3 class="title" style="margin: 0;padding: 5px 10px">Thank <span>You</span></h3>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
<div class="row">
<div class="col-md-5">
<p>© Copyright 2015 by Breezer Servers. All Rights Reserved.</p>
</div>
<div class="col-md-5 pull-right">
<nav id="footer-menu">
<ul>
<li><a href="http://www.breezerservers.com/careers/">Careers</a>
</li>
<li><a href="http://www.breezerservers.com/faq/">FAQ's</a>
</li>
<li><a href="#contact">Contact</a>
</li>
<li><a href="http://www.breezerservers.com/tos/">Terms of Service</a>
</li>
<li><a href="http://www.breezerservers.com/sponsorship/">Apply for Sponsorship</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
答案 0 :(得分:0)
我的猜测是有人添加了页脚底部的空间,以便第三方聊天应用程序不会掩盖页脚链接。如果删除底部的空格,则需要修改聊天覆盖的位置。
要消除差距,您需要修改以下CSS:
footer div.container div.row > div {
margin-bottom: 25px;
}
边距在页脚底部添加25px。更改CSS以使边距不再存在将解决您的初始问题:
footer div.container div.row > div {
margin-bottom: 0;
}
要覆盖任何其他边缘情况,使其无法查看整个代码,请将以下内容添加到CSS中:
html, body, ul{margin:0;}
正如我所提到的,我怀疑这会导致您的聊天框覆盖您的页脚链接。
答案 1 :(得分:0)
我发现了什么问题。我的解决方案有效。
感谢所有帮助。我很感激。
在:
footer {
background: #121214;
border-top: 4px solid #1F1F1F;
font-size: 0.9em;
padding: 80px 0 0;
padding-bottom: 0;
position: relative;
}
&#13;
在: 我换了位置:亲戚;位置:绝对和增加的宽度:100%;
footer {
background: #121214;
border-top: 4px solid #1F1F1F;
font-size: 0.9em;
padding: 80px 0 0;
padding-bottom: 0;
width: 100%;
position: absolute;
}
&#13;
效果很好。