如何将HTML页面分为3列，各列可独立滚动

Question

我想把一个HTML页面分成三列，这样每一列里的内容都可以单独滚动。整个页面是静止的，也就是说，只有这三列可以滚动。举个例子，就像苹果的备忘录那样：第一列是文件夹，可以滚动查看；第二列是文件夹里的笔记，也可以单独滚动；第三列是静态的区域，用来显示文本。

我还没尝试过任何方法，因为我不知道这样做是否可行。请给我一些相关的链接，或者简单告诉我一下这样做是否可能，以及怎么做。

Answer 1

你把页面的溢出部分隐藏起来，然后用三个

标签把屏幕分成几个部分，给它们设置了垂直方向的溢出效果：

let content = [];
for (let i = 0; i < 1000; i++) {
    content.push(i);
}
content = content.join("<br>");
for (let c of document.querySelectorAll(".main-content")) {
    c.innerHTML = content;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.main-content {
    height: 100%;
    width: 31%;
    display: inline-block;
    overflow-y: auto;
}

#left {
    background-color: lightgreen;
}

#center {
    background-color: gray;
}

#right {
    background-color: pink;
}

<div id="left" class="main-content"></div>
<div id="center" class="main-content"></div>
<div id="right" class="main-content"></div>