页面

Question

已经搜索过google和这个主板并尝试了很多解决方案，但没有任何成功。我希望在任何网站的底部都有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，因为我找不到任何解决方案。

任何帮助都会很棒： - ）

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

Answer 2

除了上述丹尼尔·C的回答。

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

例如：

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