1

ページの CSS スタイル設定で問題が発生しました。基本的に、コンテンツを 2 列に編成するダイアログとして使用される div があります。最初の列には要素の長いリストを含めることができ、スクロール可能にする必要があります。固定位置。したがって、すべてのダイアログ コンテンツをクロール可能にするのではなく、半分だけにしたいのです。試してみる必要がある場合に備えて、ここで jsfiddleに例をまとめました...コードは次のとおりです。

CSS

#container {
border: 1px solid black;
height: 200px;
}
#main {
    display: table;
    border: 1px dashed blue;
    height: 200px;
}
#row{
    display: table-row;
    height: 200px;
}
#leftPanel{
    display: table-cell;
    width: 50%;
    height: 200px;
    overflow: auto;
    border: 1px dotted red;
}
#rightPanel{
    display: table-cell;
    width: 50%;
    vertical-align: top;
    height: 200px;
}

HTML

<div id="container">
    <div id="main">
        <div id="row">
            <div id="leftPanel"> <!-- This one should be scrollable -->
                <!-- Long list of element here-->
            </div>
            <div id="rightPanel">
                <div style="height: 50px;">
                    Something here
                </div>
                <div style="height: 50px;">
                    Something else here
                </div>
            </div>
        </div>
    </div>
</div>​​​​​​​​​​​​​​​​​​​

leftPanel をスクロール可能にするにはどうすればよいですか? ご覧のとおり、CSS テーブルのすべてのコンポーネントに固定の高さを設定しようとしましたが、結果はありません...何が問題なのですか?

4

1 に答える 1

2

このように：http：//jsfiddle.net/Zw8WK/10/

使用overflow-y: scrollまたは交互にoverflow : scroll

左の列の高さをある種の可変の高さにする必要がある場合は、もっと注意が必要かもしれません。ここでは、親コンテナの高さに設定しています。

于 2012-05-07T14:30:41.727 に答える