Question

在我的Angular应用程序中，我有一个显示表数据的视图，在数据下面有一个分页部分。我遇到了一个问题，如果我缩放页面，内容会增加到不是所有内容都可见的程度，但不会出现垂直滚动条。此外，即使我的css容器中有overflow: auto，情况也是如此。我需要在我的CSS中调整什么才能在需要时显示滚动条？为了澄清，此问题与Chrome和Safari有关。在Firefox中，滚动条按预期显示。

这是我的观看代码：

<!-- START TABULAR-CONTAINER -->
<div class="tabular-container">

    <!-- START ACTION-AREA -->
    <div class="action-area">
        ... 
    </div> 
    <!-- END ACTION-AREA -->

    <!-- START TABLE AREA -->
    <table>
    ...
       <div class="table-spacer"></div>
    </table> 
    <!-- END TABLE AREA -->

    <!-- START PAGINATION CONTROLS -->
    <div *ngIf="records?.data" class="pagination">
        <pagination-controls class="paginator" (pageChange)="pageChange($event)" 
                    id="stream"
                    maxSize="12"
                    directionLinks="true"
                    autoHide="true">
        </pagination-controls>
    </div> 
    <!-- END PAGINATION-CONTROLS -->

</div> 
<!-- END TABULAR-CONTAINER -->

这是我的相关LESS / CSS：

    .tabular-container {
      padding: 1.25rem;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      overflow: auto;
    }

    .table-spacer {
      padding-top: 1.25rem;
    }

   .pagination {
      display: flex;
      justify-content: flex-end;
    }

我的理解是，如果包含div，这里是一个名为＆＃34; tabular-container＆＃34;的类，box-sizing设置为border-box，并且overflow:auto ，这应该工作。我在这里错过了什么？我可以在CSS中调整什么来让滚动条在用户缩放页面时显示？

在Angular App中缩放页面时不显示滚动条

0 个答案: