Question

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

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

div的高度适合容器div的高度与自动滚动

1 个答案: