Angular 4 + Bootstrap 4 页面底部的页脚

Question

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

我正在使用 Angular4 和 Bootstrap4，这是我当前的代码（这是一个模板，需要分开，因为它有问题）：

<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，因为我发现没有一个解决方案有效。

任何帮助都会很棒 :-)

Answer 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 关闭标记之后添加的。

Answer 2

除了以上 Daniel C. 的回答

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

例如：

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

Angular 4 + Bootstrap 4 页面底部的页脚

Angular4 + Bootstrap 4 Footer at bootom of page

css

footer

angular-ui-bootstrap

angular