使用 Angular 4 和 Bootstrap 4 在底部设置页脚（适应内容）答案

【问题标题】：Set footer on bottom (adapted to content) with Angular 4 and Bootstrap 4使用 Angular 4 和 Bootstrap 4 在底部设置页脚（适应内容）
【发布时间】：2018-04-26 17:12:26
【问题描述】：

¿如何使页脚停留在具有以下结构的网站底部？：

<html>
    <head>
    </head>

    <body>
        <app-root></app-root>
    </body>

</html>

所以，app-root 是 angular 的主要组件，在这个组件内部我有以下结构：

<app-navbar></app-navbar>
<div class="container">
    <div class="row">

        <div class="col-12 p-0">
            <app-information *ngIf="title == 'information'"></app-information>
            <app-form *ngIf="title == 'form'"></app-form> 
            <app-proyects *ngIf="title == 'proyects'"></app-proyects>
            <app-blog *ngIf="title == 'blog'"></app-blog>
            <app-courses *ngIf="title == 'coursess'"></cursos>
        </div>

    </div>
</div>
<app-footer></app-footer>

因此，为了便于理解，col-12 div 中的 div 的显示取决于通过按下导航栏上的按钮设置的名为 title 的变量。情况是，并非所有这些 div 的内容都超过了屏幕大小，并且页脚向上。

在我的页脚中，我有这样的结构：

<footer class="bg-inf-blue" >
    <div class="container p-0">
        <div class="row text-white py-3">
            <div class="col-6 h6 p-0">Contact</div>
            <div class="col-6 h6">Social Media</div>
            <div class="col-2 p-0">
                <ul class="list-unstyled">
                    <li class="h6">Place 1</li>
                    <li>Place 1 address</li>
                    <li>XXX XXX-XXXX</li>
                </ul>
            </div>
            <div class="col-2">
                <ul class="list-unstyled">
                    <li class="h6">Place 2</li>
                    <li>Place 2 address</li>
                    <li>XXX XXX-XXXX</li>
                </ul>
            </div>
            <div class="col-2">
                <ul class="list-unstyled">
                    <li class="h6">Place 3</li>
                    <li>Place 3 address</li>
                    <li>XXX XXX-XXXX</li>
                </ul>
            </div>
            <div class="col-6 align-items-center">
                <a href="https://www.facebook.com/address/" target="blank"><img src="../assets/facebook-logo-button.png" height="40px"></a>
                <a href="https://twitter.com/address" target="blank"><img src="../assets/twitter-logo-button.png" height="40px"></a>
            </div>
            <div class="col-12 p-0">
                <small>Lorem ipsum dolor sit amet consectetur</small>
            </div>
        </div>
    </div>
</footer>

我需要的是，当和之间的内容太短而无法填满屏幕时，页脚留在屏幕底部。

如果有使用 CSS 的解决方案，我正在使用 Twitter Bootstrap 4，如果有使用 typescript 的解决方案，我正在使用 Angular 4。

【问题讨论】：

标签： twitter-bootstrap angular components footer bootstrap-4

【解决方案1】：

您可以按照 Twitter v4 示例 (https://v4-alpha.getbootstrap.com/examples/sticky-footer/) 中的说明应用 sticky footer。

这是一个简短的例子：

HTML

<footer class="footer">
 ...
</footer>

CSS

html {
    position: relative;
    min-height: 100%;
}

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

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px;
}

【讨论】：

position: absolute 不是最佳解决方案，因为您应该关心具有 position:relative 的父 html 元素。我的意思是有机会得到一些错误。
好点，我为 HTML 添加了 css 样式，并添加了指向 sticky-footer.css 的链接以供参考。

【解决方案2】：

有很多方法可以在底部设置页脚。这是其中之一：

<div class="wrapper container">

    ... // your html code here

    <div class="push"></div>

</div>
<app-footer></app-footer>

<style>

.wrapper{
    min-height: 100%;
    margin-bottom: -170px;
}

* html .wrapper{
    height: 100%;
}

.push{
    height: 170px;
}

</style>

在我的例子中，170px 是页脚的高度。

【讨论】：

【解决方案3】：

如果我理解正确，这通常可以通过 css 来实现，传统上：

html,body{
    height: 100%
}

对于您的示例，您可以尝试：

.container { height: 100%;}

或者甚至尝试将您的 app-navbar 和 app-footer 移动到 index.html 而不是 app.component.html

【讨论】：

【解决方案4】：

同样的问题，用这个方法解决了：

html {
    position: relative;
    min-height: 100%;
}

body {
    /* 115px is the height of my footer */
    padding-bottom: 115px;
}

.footer{  
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 10px;
}

【讨论】：