How to make this angular flex layout full height based on screen size?

问题

I want to create one grid of full height along with a pagination element always at the bottom of the screen. I am using flex layout to achieve this. I am able to produce this result on a fix height screen (My workstation).

But when I resize the browser or open the app on other small systems. the bottom pagination got overflowed and do not stick to there. Like the image I am attaching here.

The code for the main page skeleton is like this

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

The class sec2 is having the below css as a result in insepecter .

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

Now inside the Directive I have this code.

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


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

I have used the below 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;
}

Also because of the bug in the above layout I get the select field in pagination got overflowed instead of showing a normal behavior as I asked here in this question. Why angular material select is overflowing the screen

Please help me with setting the correct layout because due to this I am not able to test my app in diff view ports.

回答1:

Wrap mat-paginator around a div and add the below properties.

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

回答2:

You could give it a fixed position and set bottom to 0. If you give the body a margin-bottom equal to the height of the pagination it should hive you the desired scrollbar size as well (so it doesn't overflow the pagination component).

来源：https://stackoverflow.com/questions/49996048/how-to-make-this-angular-flex-layout-full-height-based-on-screen-size