Html 使用scroll-y:hidden将Div设置为100%高度，但如何使子Div具有可滚动性？

由于这是纯HTML/CSS问题，我没有标记angular，因为我将它作为一把小提琴在纯HTML中复制

我有一个div，它的

高度为100%

和

溢出-y:hidden

，因此div会维护视口

我注意到的问题是，其中的一个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>

.banner{高度：100px；}
.内容{高度：计算（100%-150px）；}
.footer{高度：50px；}

然后在子组件中：

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

.content{overflow-y:hidden；}
.table{overflow-y:scroll；}
{{title}}

不过，我似乎无法让它工作。 这是一把小提琴的样品：

编辑：请确保您正在使用当前的小提琴

---

我试图让

div.table

的内容滚动，而不是

.contentB

。因为我希望{{title}}尽可能保持静态。

您的contentB类需要

    overflow-y: scroll;

这对我用你的小提琴有用

编辑：

为了使滚动仅在表中工作，您可以使用添加最大高度和自动滚动的类在其前面创建一个父div，如下所示：

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

---

处理此示例：

更改

.contentB的CSS以允许其滚动：

.contentB {
  overflow-y: auto;
  height: 100%;
}


如果您需要
.title
不滚动，只需将其向上移动到上一个容器中，从当前容器中移出：
问题是您使用的是
calc
函数，请使用直接值

您可以使用
overflow-y:auto打开
.contentA

在
.contentB
上，无需更改溢出



.wrapper{
高度：500px；
宽度：100%；
位置：绝对位置；
}
.横幅{
高度：100px；
背景颜色：灰色；
}
孔塔纳先生{
高度：350px；
溢出y：滚动；
}
.页脚{
高度：50px；
背景颜色：灰色；
}
/*这是内部组件的内容*/
.contentB{
身高：100%；
}
.桌子{
显示：表格；
溢出y：滚动；
}
.表格>分区{
显示：表格行；
}
.表格分区{
显示：表格单元格；
}

标题
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
将以下内容替换为：.contentB{overflow-y:hidden；}到overflow-y:auto？没有必要这样做！重要标签。我只是注意到没有它它也能工作，重要的是没有必要@AlvaroCarvalho我正在尝试让
div.table
滚动，而不是
的全部内容。contentB
@fallereneaper在您的表前添加了一个父div，并使用了一个可滚动的类，设置了最大高度和溢出-y:auto，结果成功了。检查这里：@AlvaroCarvalho就是这里！尤里卡！非常感谢。我正在尝试滚动
.table
的内容，不一定是
.contentB
。我会将此用作后备方案，但我希望页面上的内容标题保持静态。@fallereneaper
.contentB {
  overflow-y: auto;
  height: 100%;
}