始终将页脚动态放置在底部

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

在您的 CSS

中更改为以下内容

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

Answer 2

现在您的 .footer 默认为 position: static，但如果您希望它始终位于 window 的底部，您需要使用 position: fixed，因为fixed 元素相对于 window.

定位

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

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

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

Answer 3

Bootstrap 已经有一个如何制作 sticky footer.

的例子

您需要的基本 CSS 是：

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

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

始终将页脚动态放置在底部

Placing a footer dynamic always to bottom

html

css

twitter-bootstrap-3