1

我遇到了页面的 CSS 样式问题。基本上我有一个 div 将用作一个对话框，我想在其中组织 2 列中的内容：第一个可以包含一长串元素，并且应该是可滚动的，第二个应该很小并且在一个固定的位置。因此，我不希望所有对话内容都是可滚动的，而只是其中的一半。我在 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 回答