Angular 4 + Bootstrap 4 页脚在页面底部答案

【问题标题】：Angular4 + Bootstrap 4 Footer at bootom of pageAngular 4 + Bootstrap 4 页脚在页面底部
【发布时间】：2019-01-16 01:07:00
【问题描述】：

已经搜索了谷歌和这个板并尝试了很多解决方案，但没有任何成功。我喜欢在任何站点的底部有一个footer（如果站点在视口底部不够高）。

我正在使用 Angular4 和 Bootstrap4，这是我当前的代码（这是一个模板，需要对其进行划分，因为 SO 存在问题）：

<mat-toolbar color="primary" class="mat-elevation-z2" *ngIf="auth.isLoggedIn()">
<button mat-button class="pull-left" [disabled]="!auth.isLoggedIn()" (click)="sidenav.toggle()">
    <i class="fa fa-navicon" aria-hidden="true"></i> PowerPals
</button>

<div *ngIf="auth.isLoggedIn()">
    <button mat-button class="pull-left" (click)="showProfile()">
        <i class="fa fa-user" aria-hidden="true"></i><span class="d-none d-sm-inline"> {{auth.username$ | async}}</span>
    </button>

    <button id="logoutButton" mat-button class="pull-right" (click)="logout()">
        <i class="fa fa-power-off" aria-hidden="true"></i><span class="d-none d-sm-inline"> ABMELDEN</span>
    </button>
</div>

<mat-sidenav-container (window:resize)="onResize($event)" [style]="mainStyle.getValue()">
<mat-sidenav *ngIf="auth.isLoggedIn()" [mode]="sidenavMode" [opened]="true" #sidenav class="sidenav-shadow">
    <app-nav-pane *ngFor="let nav of (app.navmods$ | async)" [content]="nav"></app-nav-pane>
</mat-sidenav>
<div class="container-fluid">
    <div class="row" style="flex: 1 0 auto;">
        <div class="col-12">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>
<footer>
    <div class="footer-copyright">
        Footer
    </div>
</footer>

如前所述，我希望页脚位于每个页面或视口的末尾。目前它看起来像这样：

但页脚应位于页面底部。有人对此有解决方案吗？我目前没有使用任何特殊的css，因为我发现没有任何解决方案有效。

任何帮助都会很棒:-)

【问题讨论】：

在我的解决方案中，我将两个类设置为页脚，如下所示：<footer class="card-footer fixed-bottom">bla bla` 但我使用的是引导程序 4，此链接上的示例很少v4-alpha.getbootstrap.com/examples Cheers
fixed-bottom 是我想念的东西。如果您将此作为答案，我很乐意接受。
发现更多问题。它仍然不在sidenav 中（如果我关闭或打开它，它不会移动）——即使它在标签中
在我的情况下，footer 没有隐藏，可能不是适合您的解决方案，但我也会分享。我只是在</mat-sidenav-container> 标签之后添加footer。还尝试在 StackBlitz stackblitz.com/angular/… 上使用此 sidenav 示例添加您的页脚

标签： css angular angular-ui-bootstrap footer

【解决方案1】：

一种可能的解决方案是使用card-footer 和fixed-bottom css 类（参见：bootstrap v4 fixed-bottom），像这样。

<footer class="card-footer fixed-bottom"><div>bla bla</div></footer>

只需确保页脚位于</mat-sidenav-container> 之后

注意：即使 sidenav 被隐藏，此解决方案也会保持页脚可见，因为它是在 sidenav-container 关闭标记之后添加的。

【讨论】：

【解决方案2】：

除了 Daniel C 的上述回答。

您也可以在没有卡片的情况下使用页脚。

例如：

<footer class="fixed-bottom"><div>my footer</div></footer>

【讨论】：