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”基本上表示内容将增长以适应任何可用空间。这是一个演示此操作的 fiddle :

http://jsfiddle.net/41ec8kvj/

您还可以在这里找到各种其他方法来做同样的事情: https://css-tricks.com/couple-takes-sticky-footer/