如何使用css独立滚动两个div

Question

我在下面的链接中有一个页面布局。当我滚动内部窗口区域时，两个div都在滚动。。

链接到代码

我希望内部窗口中的两个div(第一列，第二列(能够独立滚动。如果内容在视图端口高度内，则禁用滚动。这可能只使用CSS吗？

Answer 1

将滚动添加到独立类中，您还必须设置您希望内容具有滚动的max高度，对于下面的示例，我使用了400px作为高度，发布该高度您将具有滚动。

奖金提示

当使用flex作为方向时，flex-direction:row;是默认值，您无需特别使用它。

.fixed-box {
position: fixed;
width: 100%;
}
.sticky-header {
position: fixed;
}
.inner-window {
border: 1px solid red;
display: flex;
flex-direction: row;
}
.first-column {
overflow-y: auto;
height: 400px;
}
.second-column {
overflow-y: auto;
height: 400px;
}

<div class="row h-100">
<div class="col-3">
<div class="col-9 bg-warning h-100 right-window">
<div class="inner-window">
<div class="first-column">
<p>This is first column</p>
<p>This is first column</p>
<p>This is first column</p>
<p>This is first column</p>
<p>This is first column</p>
<p>This is first column</p>
<p>This is first column</p>
<p>This is first column</p>
<p>This is first column</p>
<p>This is first column</p>
<p>This is first column</p>
<p>This is first column</p>
<p>This is first column</p>
<p>This is first column</p>
<p>This is first column</p>
<p>This is first column</p>
<p>This is first column</p>
</div>
<div style="background: green" class="second-column">
<p>This is second column</p>
<p>This is second column</p>
<p>This is second column</p>
<p>This is second column</p>
<p>This is second column</p>
<p>This is second column</p>
<p>This is second column</p>
<p>This is second column</p>
<p>This is second column</p>
<p>This is second column</p>
<p>This is second column</p>
<p>This is second column</p>
<p>This is second column</p>
<p>This is second column</p>
<p>This is second column</p>
<p>This is second column</p>
</div>
</div>
</div>
</div>

Answer 2

我还没有尝试过，但我会尝试在CSS文件中为每个div设置overflow-y: scroll。当内容高度超过div高度时(假设您设置了固定高度(，它会自动添加滚动功能。如果不起作用，请随时通知我。祝你好运