使用 flexlayout 的页脚问题

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>

上面的代码在页脚中使用了额外的 space 它意味着即使内容较少也会出现滚动条。可以建议我在这里遗漏的内容。

使用css

body,html{
height:100%;
}

Answer 1

您的问题不是很清楚，但是，为了使用 flexbox 使页脚出现在页面底部，您需要在其上方的内容中添加以下 flex 样式：

flex: 1 0 auto;

这一行中的第一个“1”基本上意味着内容将增长以适应任何可用的 space。这里有一个 fiddle 演示了这一点：

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 存储库

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

Answer 3

这里有几行解决方案：

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>

styles.css:

html, body {
    height: 100%;
    box-sizing: border-box;
    margin: 0;
}

另一种选择 如果您更喜欢填充页脚而不是您的内容：

app.component.html:

<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>

styles.css:

html, body {
    height: 100%;
}

使用 flexlayout 的页脚问题

Footer issue using flexlayout

css

angular-flex-layout

angular