css - div 的高度适合容器 div 的高度自动滚动

Question

我在页面的 CSS 样式方面遇到了问题。 基本上我有一个将用作对话框的 div，我想在其中将内容组织成两列:第一列可以包含一长串元素，并且应该是可滚动的，第二列应该很小并且在一个固定的位置。因此，我不希望所有的对话框内容都是可滚动的，而只是其中的一半。 我举了一个例子here on 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 表格的每个组件设置固定高度，但没有任何结果……这里有什么问题吗？

Answer 1

像这样:http://jsfiddle.net/Zw8WK/10/

使用 overflow-y: scroll 或者 overflow : scroll

现在，如果您需要将左列的高度设为某种可变高度，这可能会更加棘手，这里我将其设置为父容器的高度。