Question

在我的项目中使用flexlayout，页脚无法正确呈现

情形： 如果没有文字，那么页脚应该粘在屏幕的底部，如果屏幕内容更多，那么页脚应该被推到屏幕的底部。

下面是我的代码：

<mat-sidenav-container fxLayout="column" fxFlexFill>
   <mat-sidenav></mat-sidenav>    
   <mat-sidenav-content>
     <header>
       <mat-toolbar></mat-toolbar>
     </header>
     <section fxFlexFill> 
       <!--Content Area -->   
     </section>
     <footer>
        <mat-toolbar></mat-toolbar>
     </footer>    
   </mat-sidenav-content>    
</mat-sidenav-container>

上面的代码在页脚中占用额外的空间，即使内容较少，也会显示其平均显示的滚动条。可以暗示我错过了什么。

使用css

body,html{
height:100%;
}

Answer 1

但是，您的问题不是很明确，为了使用flexbox将页脚显示在页面底部，您需要将以下flex样式添加到其上方的内容中：

flex: 1 0 auto;

第一个＆＃39; 1＆＃39;在这一行中，基本上意味着内容将增长到适合任何可用空间。这是一个小提琴，演示了这一点：

http://jsfiddle.net/41ec8kvj/

您还可以在此处找到各种其他方法来执行相同的操作： https://css-tricks.com/couple-takes-sticky-footer/

Answer 2

为了将页脚设置在底部，您可以尝试以下代码

<mat-sidenav-container class="container">
<mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
<mat-sidenav-content>
    <div fxLayout="column" style="height:100vh;">
        <div fxFlex>content goes here</div>
        <div fxFlex="50px" fxLayoutAlign="center center" class="footer">footer</div>
    </div>
</mat-sidenav-content>

这里我使用Angular Material和FlexLayout

创建了一个演示

https://github.com/Ravi-Rajpurohit/mat-sideNav-stickyFooter

并查看我的git repo

https://github.com/Ravi-Rajpurohit/mat-sideNav-stickyFooter

Answer 3

以下是几行解决方案：

<div fxLayout="column" style="height: 100%;">
    <app-header></app-header> // your header
    <router-outlet></router-outlet> // your content
    <app-footer fxFlexOffset="auto"></app-footer> // your footer
</div>

使用flexlayout的页脚问题

3 个答案: