Question

所以我有这个页脚，我想在我网站的每一页的底部定位。我尝试使用绝对和固定的位置，但没有工作。这就是我所拥有的：

<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);
}

我已经尝试解决这个问题很长一段时间了，如果有人能帮我一把，我会很感激的。）

Answer 1

CSS中的一切正常，只需更改

即可

.footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    background:#393939;
}

到

.footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    background:#393939;
}

Answer 2

嗯......我觉得你正在使用bootstrap吗？如果是这样，请尝试将您的页脚设为＆＃34;导航栏＆＃34;并用以下方法将其固定在底部：

<nav class="navbar navbar-inverse navbar-fixed-bottom">
    <YOUR FOOTER>
</nav>

也许这不是最佳方法。

如何在我网站上的每个页面的底部保持页脚？

2 个答案: