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

Posted 2023-03-06

【中文标题】如何根据屏幕尺寸使这种角度弯曲布局全高？

【英文标题】：How to make this angular flex layout full height based on screen size?

【发布时间】：2018-10-04 09:10:53

【问题描述】：

我想创建一个全高网格以及一个始终位于屏幕底部的分页元素。我正在使用 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

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

【参考方案1】：

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

【讨论】：

我已经按照你说的做了，但仍然不能正常工作。我是否需要更改 css 中的任何内容？

【参考方案2】：

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

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

【讨论】：

谢谢，我将 mat-paginator 包裹在一个 div 周围，并给出了这样的样式 style="position: sticky;bottom: 0px;"这在 chrome 中工作正常，但在 Firefox 中他们刚刚停止工作，我正在尝试你的解决方案

现在它工作得很好。再次感谢，您知道为什么 mat-select 会溢出屏幕吗？还没有解决。