css - 使用 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>

上面的代码在页脚中占用了额外的空间，即使内容较少，也意味着出现滚动条。可以建议我在这里错过的内容。

使用 CSS

body,html{
height:100%;
}

Answer 1

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

flex: 1 0 auto;

此行中的第一个“1”基本上意味着内容将增长以适应任何可用空间。这是一个演示此操作的小提琴：

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

这是几行的解决方案：

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

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

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>

样式.css：

html, body {
    height: 100%;
}