Div被设置为100%的高度，滚动-y:隐藏，但我如何让一个子Div具有可滚动性

由于这纯粹是HTML/CSS问题，我没有标记angular，因为我只是在HTML中复制它。

我有一个带有height:100%和overflow-y: hidden的div，所以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>

然后在子组件中：

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

不过，我似乎无法让它发挥作用。这是一把小提琴样品：https://jsfiddle.net/uctxnads/

编辑：请确保您使用的是当前小提琴。

我正在尝试滚动div.table的内容，而不是.contentB。因为我希望｛｛title｝｝尽可能保持不变。

您的contentB类需要具有

overflow-y: scroll;

这对我使用你的小提琴很有用。

编辑：

为了让滚动只在表中工作，您可以在它前面创建一个父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;
}

处理这个例子：https://jsfiddle.net/jgztwmsk/

问题是您使用的是calc函数，请使用直接值。

您可以在.contentA上使用overflow-y: auto;。

在.contentB上，不需要更改溢出。

https://jsfiddle.net/ratyxpj7/

.wrapper {
height: 500px;
width: 100%;
position: absolute;
}
.banner {
height: 100px;
background-color: grey;
}
.contentA {
height: 350px;
overflow-y: scroll;
}
.footer {
height: 50px;
background-color: grey;
}
/* This is the content of the inner component. */
.contentB {
height: 100%;
}
.table {
display: table;
overflow-y: scroll;
}
.table > div {
display: table-row;
}
.table div div {
display: table-cell;
}

<div class="wrapper">
<div class="banner"></div>
<div class="contentA">
<div class="contentB">
<div class="title">
Title
</div>
<div class="table">
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
<div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
<div>CellA</div>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</div>

更改.contentB的CSS以允许其滚动：

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

https://jsfiddle.net/fnrm4aLg/

如果您需要.title不滚动，只需将其从当前容器上移到上一个容器中即可：https://jsfiddle.net/p6xr39yv/

相关内容

最新更新

热门标签：