如何在我的应用中设置页脚(我使用 Angular Material)以便它:
- 如果内容高度小于视口(viewport),则粘在底部
- 如果内容高度大于视口(viewport),则向下移动/被压下
还有一件更重要的事情——我想通过 angular/flex-layout来实现这一点,而不是通过标准的 HTML/CSS“flex-box”。
<mat-sidenav-container>
<mat-sidenav #sidenav
fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-nav-list>
<mat-list-item *ngFor="let li of listItems" routerLink="{{li.link}}">
<mat-icon mat-list-icon>{{li.icon}}</mat-icon>
<p mat-line>{{li.name}}</p>
</mat-list-item>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<app-header (menuButtonClick)="sidenav.toggle()"></app-header>
<ng-content select="[outlet]"></ng-content>
<app-footer></app-footer>
</mat-sidenav-content>
</mat-sidenav-container>
谢谢大家
最佳答案
如果您更喜欢填充内容而不是页脚,这里有几行解决方案(Akhi 的解决方案):
app.component.html:
<div fxLayout="column" fxFlexFill>
<app-header></app-header> // your header
<div fxFlex>
<router-outlet></router-outlet> // your content
</div>
<app-footer></app-footer> // your footer
</div>
样式.css:
html, body {
height: 100%;
box-sizing: border-box;
margin: 0;
}
关于html - 如何通过 Flex-Layout 设置 Angular Material Footer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53887152/