将页脚动态始终置于底部

Question

我有一个基于bootstrap的网站。每个网站都有独特的内容和独特的高度。

我有一个页脚并将其放在我的索引上，结果就是：

那正是我所需要的，但后来我试图在另一个网站中实现页脚，这个网站更短，我的页脚在空中飞舞。

正如您所看到的，页脚出现在我的文本之后，但我希望页脚始终位于底部的每个站点上。如果没有那么多文本内容，它应该移动到最近的底部位置，以便获得滚动条。

我该怎么做？ PS：我真的很新鲜到html / css

Footer.css

.bottom {
    background-color: #474747;
}
.bottom .container {
    background-color: #373737;
    min-height: 130px;
}
.bottom .container h3 {
    color: #999;
}
.bottom .container p {
    color: #666;
}

第二个屏幕截图外的片段

。 。

<footer>
<!-- Site footer -->
    <div class="bottom">
        <div class="container">
            <div class="col-md-4">
                <h3><span class="glyphicon glyphicon-info-sign"></span> Unternehmen</h3>
                <p>Text Text</br>
                Text Text</br>
                Text Text</p>
            </div>
            <div class="col-md-4">
                <h3><span class="glyphicon glyphicon-eye-open"></span> Links</h3>
                <a href="Text Text.htm">Text Text</a><br>
                <a href="Text Text.htm">Text Text</a></br>
                <a href="http://icons8.com/">Icons8</a>
            </div>
            <div class="col-md-4">
                <h3><span class="glyphicon glyphicon-send"></span> Kontakt</h3>                
                  <a href="tel:+">Text Text</a><br>
                  <a href="mailto:mail>Text@text.de</a>
            </div>
        </div>
    </div>
    </footer> 

        <!-- Bootstrap-JavaScript
    ================================================== -->
    <!-- Am Ende des Dokuments platziert, damit Seiten schneller laden -->
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
</body></html>

Answer 1

目前您的.footer默认为position: static，但如果您希望始终将其隐藏在窗口底部，则需要使用position: fixed，因为fixed元素相对于窗口定位。

html, body {
  height:100%;
  margin:0;
  padding:0;
}
.bottom {
  position:fixed;
  bottom:0;
}

但是，如果您希望它位于页面底部而不是窗口，请使用：

.bottom {
  position:absolute;
  bottom:0;
}

Answer 2

Bootstrap已经有一个如何制作sticky footer的例子。

您需要的基本CSS是：

body {
    margin-bottom: 60px; /* footer height */
}

.footer {
    position: absolute;
    bottom: 0;
    height: 60px;
}

Answer 3

在CSS中更改为以下内容

.bottom { bottom: 0; background-color: #474747; }