css - Angular 4 + Bootstrap 4 页脚位于页面底部

Question

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

我正在使用 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>

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

但页脚应该位于页面底部。有人有解决办法吗？我目前没有使用任何特殊的 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 关闭标记之后添加的。