css - 沿底部堆叠的水平 div 将滚动条隐藏在容器滚动条下

Question

我希望在底部有一个未确定数量的 div，水平堆叠。当有太多无法容纳时，它们将是可滚动的。

div 里面有一个列表。当此列表增长时，它将有一个垂直滚动条。问题是该垂直滚动条的底部位于父水平滚动条下方。如何使整个滚动条在外部水平滚动条显示或不显示的整个过程中都可以访问？

我正在使用问题看起来比 IE 更严重的 chrome。

JSFiddle

这是我的 html，其中重复了类窗口

减少html

<div class="outer">
    <div class="window">
        <div class="heading">heading</div>
        <div class="list">
        listing<br>..... repeated ....
        </div>
    </div>
    ..... window class repeated ....
</div>

css

body
{
    overflow: scroll;
}
.outer
{
    position: fixed;
    height: 200px;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow-y: auto;
    border: 1px solid red;
    white-space: nowrap;
}
.window
{
    border: 1px solid blue;
    background-color: White;
    width: 200px;
    height: 100%;
    display:inline-block;
    white-space:normal;

}
.heading
{
    color: purple;
    background-color: #c0c0c0;
}
.list
{
    overflow-y: scroll;
    height: 100%;
}

Answer 1

Chrome 在定位方面做了一些古怪的事情。Padding-bottom：20px 似乎可以在 Chrome 中修复它，而不会影响 IE 或 Firefox。我没有在 Safari 上进行测试，但它也应该在那里工作。

body
{
    overflow: scroll;
}
.outer
{
    position: fixed;
    height: 200px;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow-y: auto;
    border: 1px solid red;
    white-space: nowrap;
    padding-bottom: 20px;
}
.window
{
    border: 1px solid blue;
    background-color: White;
    width: 200px;
    height: 100%;
    display:inline-block;
    white-space:normal;

}

.heading
{
    color: purple;
    background-color: #c0c0c0;
}
.list
{
    overflow-y: scroll;
    height: 100%;
}