Question

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

但是，在第二列中，我只需要滚动列的一部分，其中Title将保留，其余部分将滚动。

以下是我正在尝试的代码：

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

和css是

.col1 {
    position: fixed;
    width: 25%;
    overflow: auto;
    top: 0;
    bottom: 0;
}
.col2 {
    position: fixed;
    left: 30%;
}
.scrollable {
    position: relative;
    overflow: auto;
    top: 0;
    bottom: 0;
}

知道如何实现此功能吗？（如果有帮助，有或没有Bootstrap。）

Answer 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;
}

两个可滚动的列设计，固定标题

1 个答案: