在网页上，我如何才能为某个部分设置滚动条？

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

Answer 2

body, html {height: 100%}

.what_wraps_your_span {overflow-y: scroll; max-height: 100%;}