Question

我想创建一个全高度的网格以及始终位于屏幕底部的分页元素。我正在使用flex布局来实现这一目标。我能够在修复高度屏幕（我的工作站）上生成此结果。

但是当我调整浏览器大小或在其他小型系统上打开应用程序时。底部分页溢出，不要坚持到那里。就像我附在这里的图像一样。

主页骨架的代码就像这样

               <!-- this is for fix-->
          <div fxFlex="12" class="sec3">
                  <app-layout-header></app-layout-header>
                </div>

        <!-- this is for main view  -->

         <div fxFlex="88" fxLayout="column" fxFlexFill class="sec2">
                 <app-layout-view></app-layout-view>
                 <router-outlet></router-outlet>
          </div>

类sec2在insepecter中具有以下css。

    height: 100%;
    margin: 0px;
    width: 100%;
    flex: 1 1 100%;
    box-sizing: border-box;
    flex-direction: column;
    display: flex;
    max-height: 88%;

现在在指令中我有这段代码。

<div class="example-container mat-elevation-z8">
 <mat-table #table>
  </mat-table>


    <mat-paginator #paginator>
  </mat-paginator>
</div>

我使用了以下Css for .example-container class

.example-container {
  display: flex;
  flex-direction: column;
  min-height: -webkit-fill-available;
  min-width: 300px;
  max-height: -webkit-fill-available;
}

同样由于上面布局中的错误，我得到了分页中的选择字段溢出而不是显示正常行为，正如我在这个问题中所要求的那样。 Why angular material select is overflowing the screen

请帮我设置正确的布局，因为由于这个原因，我无法在差异视图端口测试我的应用程序。

Answer 1

围绕div包裹mat-paginator并添加以下属性。

.mat-paginator-wrapper{
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px; // change it based on your requirement
  width: 100%; 
}

Answer 2

你可以给它一个固定的位置，并将底部设置为0.如果你给身体一个等于分页高度的边缘底部，它应该给你所需的滚动条大小（所以它不会溢出分页组件）。

如何根据屏幕尺寸使这个角度柔性布局全高？

2 个答案: