所以我有这个页脚,我想把它放在我网站的每个页面的底部。我尝试使用绝对和固定的位置,但没有成功。这是我的:
<footer class="footer">
<div id="ft">
<div class="container">
<div class="footer-grids">
<div class="col-md-3 footer-grid">
<h3>Анкети</h3>
<ul>
<li><a href="{{ url('https://docs.google.com/forms/d/1fpkJ1ndBO4YmyAk2UEfFYcR7m0HvAG-xH-dbolGtyE0/viewform') }}"
target="new">Анкета – нашият екологичен отпечатък</a></li>
<li><a href=" {{ url('https://docs.google.com/forms/d/1wuH3PC8Bl4YqZUwv_bYRMUC6QpV_JoZJnhDIEd3HtQk/viewform') }}"
target="new">Анкета с цел проучване обучението по чужд език.</a></li>
</ul>
</div>
<div class="col-md-3 footer-grid">
<h3>ДЗИ и НВО</h3>
<ul>
<li><a href="{{ url('http://www.mon.bg/?') }}" target="new">18.05.2016 г. – ДЗИ по БЕЛ и НВО в VII клас
по БЕЛ</a></li>
<li><a href="{{ url('http://www.mon.bg/?') }}" target="new">20.05.2016 г. – Втори ДЗИ и НВО в VII клас
по математика</a></li>
</ul>
</div>
<div class="col-md-3 footer-grid">
<h3>Други</h3>
<ul>
<li><a href="students#stipendii">Отпускане на стипендии</a></li>
<li><a href="{{ url('pdf/grafik_vakancii.pdf') }}" target="new">График на ваканциите и неучебните
дни за 2015/2016г.</a></li>
</ul>
</div>
<div class="col-md-3 footer-grid">
<h3>Други</h3>
<ul>
<li><a href="#">PRESENTATIONS</a></li>
<li><a href="#">SEMINARS</a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</footer>
还有css:
.footer{
position: absolute;
bottom: 0;
width: 100%;
background:#393939;
}
#ft{
margin: 16px 0 0 5px;
color: rgb(249, 249, 184);
text-decoration: none;
}
#ft:hover{
text-decoration: none;
}
.footer-grid ul{
padding:0;
margin:0;
}
.footer-grid ul li{
background: url(../images/arrow.png) no-repeat 0px 6px;
list-style-type: none;
display: block;
padding-left: 23px;
line-height: 2em;
}
.footer-grid ul li a{
color: #757575;
font-size: 14px;
font-weight: 600;
}
.footer-grid ul li a:hover{
padding-left: 11px;
color:rgb(240, 226, 134);
}
.footer p {
margin:44px 0 0 0;
font-size:14px;
color: #c2c2c2;
font-weight: 600;
text-align:center;
}
.footer p a{
color:#fc3a3a;
}
.footer p a:hover{
color: #c2c2c2;
}
.footer-grid h3{
margin: 0 0 20px 0;
font-size: 25px;
font-family: Comfortaa;
color: rgb(240, 226, 134);
}
我已经尝试解决这个问题很长一段时间了,如果有人能帮我一把,我将不胜感激:)
CSS中的一切都很好,只需更改
.footer{
position: absolute;
bottom: 0;
width: 100%;
background:#393939;
}
至
.footer{
position: fixed;
bottom: 0;
width: 100%;
background:#393939;
}
Mhmm。。。我认为你在使用引导程序,对吧?如果是这样的话,试着把你的页脚做成一个"导航栏",并用这个固定在底部:
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<YOUR FOOTER>
</nav>
也许这不是最好的方法。