html - 使用 scroll-y : hidden, 将 Div 设置为高度 100% 但是如何让子 div 具有可滚动性？

Question

因为这纯粹是 HTML/CSS 问题，所以我没有标记 Angular ，因为我纯粹用 HTML 将其复制为 fiddle 。

我有一个带有 height:100% 和 overflow-y: hidden 的 div，所以 div 保持视口(viewport)。

虽然我注意到的问题是那里的一个 div 由 ngFor 填充并缩小页面但它不会让我设置 overflow-y: scroll 认为它有效。虽然没有，所以我有点困惑。

.banner { height: 100px; }
.content { height: calc(100% - 150px); }
.footer { height: 50px; }

<div class="banner"></div>
<div class="content">
  <router-outlet></router-outlet>
</div>
<div class="footer"></div>

然后在子组件中:

.content { overflow-y: hidden; }
.table { overflow-y: scroll; }

<div class="content">
  <div class="title">{{title}}</div>
  <div class="table" *ngFor="let row of rows">
    <ng-container [ngTemplateOutlet]="headers"></ng-container>
  </div>
</div>

不过我似乎无法让它工作。这是一个示例 fiddle :https://jsfiddle.net/uctxnads/

编辑:请确保您使用的是当前的 fiddle 。

我试图让 div.table 的内容滚动，而不是 .contentB。因为我想让 {{title}} 尽可能保持静态。

Answer 1

你的 contentB 类需要有

    overflow-y: scroll;

使用你的 fiddle 这对我有用。

编辑:

要使滚动仅在您的表格内起作用，您可以在它之前创建一个父 div，并使用一个类添加最大高度和自动滚动，如下所示:

    <div class="scrollable">
        <div class="table">
        <!-- contents of your table -->
        </div>
    </div>

你的可滚动类应该有

        .scrollable {
           max-height: 50px; // You can set this as you wish
           overflow-y:auto;
        }

这个例子的工作 fiddle :https://jsfiddle.net/jgztwmsk/