如何在我网站的每个页面底部保留页脚？ [复制]答案

【问题标题】：How to keep a footer at the bottom of every page on my website? [duplicate]如何在我网站的每个页面底部保留页脚？ [复制]
【发布时间】：2016-09-07 05:21:51
【问题描述】：

所以我有这个页脚，我想把它放在我网站每个页面的底部。我尝试使用绝对位置和固定位置，但没有奏效。这是我所拥有的：

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

我已经尝试解决这个问题已经有一段时间了，如果有人能帮我解决这个问题，我将不胜感激:)

【问题讨论】：

您希望它出现在超出页面底部的内容之上，还是希望它在内容较短时锚定到页面底部？
我希望它位于每一页的底部。但是我的页面不短而且有滚动条，所以这就是问题所在。
从您的描述看来，您向stackoverflow.com/q/12239166/497418 提出了一个重复的问题，但如果我错了并且误解了您的目标，请纠正我。

标签： html css footer

【解决方案1】：

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

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

到

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

【讨论】：

但是这样它会一直出现但我只是希望它粘在页面底部
如果您只是在末尾插入 html，它将获得您想要的结果。如果你想让它在短页面上粘在底部而不是在滚动页面上粘住，那是另一回事。

【解决方案2】：

嗯...我认为您正在使用引导程序对吗？如果是这样，请尝试将您的页脚设置为“导航栏”并将其固定到底部：

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

也许这不是最好的方法。

【讨论】：