html - 在网页上，我怎样才能只为某个部分设置滚动条？

Question

在获得 this question 的背后回答，我有一个看起来像这样的页面。

 <div style="white-space: nowrap;">
    <span style="display: inline-block; width: 280px">...</span>
    <span style="display: inline-block; width: 280px">...</span>
    <span style="display: inline-block; width: 280px">...</span>
    <span style="display: inline-block; width: 280px">...</span>
 </div>

如果有很多跨度，这个页面将不会换行，它会在页面上继续水平移动并给我一个水平滚动条。在每个跨度内，我都有一个 html 表，但我不确定这对问题是否重要。

这很好用，但我有一个问题，当其中一个跨度在垂直方向上真的很长而其他跨度很短时，因为您必须垂直向下滚动才能真正看到您有水平滚动条。我正在尝试找出解决此问题的方法，以便无论特定跨度部分的垂直长度如何，水平滚动条在页面上始终可见。

举个例子，如果你看看 trello(见下面的截图)。如果您有一个非常长的垂直部分，它会在该部分添加一个垂直滚动条，因此不需要向下滚动整个页面。

在我的例子中，每个跨度内都有一个 html 表。仅为该表格(而不是整个页面)实现垂直滚动条的推荐方法是什么？

Answer 1

您需要在内部元素上设置 max-height 和 overflow-y，并且需要在外部元素上设置尺寸:

HTML

<div class="outer">
    <div class="inner">foo</div>
    <div class="inner">bar</div>
    <div class="inner">whatever</div>
</div>

CSS

.outer {
    border: 2px solid red;
    float:left;
    top:0;
    bottom:0;
    position:absolute;
}
.inner {
    max-height:100%;
    overflow-y:auto;
    border: 2px solid blue;
    width:30%;
    margin-right:2%;
    float:left;
}

Here's a working fiddle