带有固定标题的两个可滚动列设计答案

【问题标题】：Two scrollable column design with fixed titles带有固定标题的两个可滚动列设计
【发布时间】：2014-04-22 03:19:54
【问题描述】：

我正在尝试制作两个可单独滚动的列就像JsFiddle 一样，第一列已经可以滚动了。

但是，在第二列中，我只需要将列的一部分与 Title 一起滚动，其余部分都被滚动掉。

这是我正在尝试的代码：

<div class="col1">
    ...
</div>
<div class="col2">
    Title
    <div class="scrollable">
        ...
    </div>
</div>

css 是

.col1 { 位置：固定；宽度：25%；溢出：自动；顶部：0；底部：0； } .col2 { 位置：固定；左：30%； } .scrollable { 位置：相对；溢出：自动；顶部：0；底部：0； }

知道如何实现此功能吗？（如果有帮助，可以使用或不使用 Bootstrap。）

【问题讨论】：

标签： css scroll positioning multiple-columns

【解决方案1】：

HTML

<div class="sidebar">
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
</div>
<div class="header">
    <h2>Title</h2>
</div>
<div class="scrollable">
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
</div>

CSS

.sidebar {
    position: fixed;
    width: 25%;
    overflow: auto;
    top: 0;
    bottom: 0;
}
.header {
    position: fixed;
    left: 35%;
}  
.scrollable {
    position: fixed;
    width: 25%;
    left: 35%;
    overflow: auto;
    top: 70px;
    bottom: 0;
}

【讨论】：