如何根据屏幕尺寸使这种角度弯曲布局全高？

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 类具有以下 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 用于 .example-container 类

.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

你可以给它一个固定的位置并将底部设置为 0。如果你给 body 一个 margin-bottom 等于分页的高度，它也应该为你提供所需的滚动条大小（这样它就不会溢出分页组件）。

Answer 2

将 mat-paginator 包裹在一个 div 周围并添加以下属性。

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