0

水平に積み上げられた下部に不確定な数の div を配置したいと考えています。多すぎて収まらない場合は、スクロール可能になります。

div の中にリストがあります。このリストが大きくなると、垂直スクロール バーが表示されます。問題は、その垂直スクロール バーの下部が親の水平スクロール バーの下にあることです。外側の水平スクロールバーが表示されているかどうかにかかわらず、スクロールバー全体にアクセスできるようにするにはどうすればよいですか?

問題がIEよりも深刻に見えるクロムを使用しています。

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%;
}

ここに画像の説明を入力

4

1 に答える 1

1

Chrome はポジショニングで奇妙なことをしていました。Padding-bottom: 20px は、IE や Firefox を台無しにすることなく、Chrome でそれを修正したようです。Safari ではテストしていませんが、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%;
}
于 2013-07-30T00:00:11.513 に答える