HTML两栏同一张卷轴

Question

我需要将页面分成两列，但我希望它们共享同一个滚动条。我需要的是，如果其中一列变得太大而我向下滚动，即使那一侧什么也没有显示，较小的列也会下降。我只能找到有人问如何获得两个分开的卷轴，但这就是我现在所拥有的。

.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

<body>
  <header>
    <h1>Header!</h1>
  </header>
  <div class="split left">
    <p>Left Side</p>
  </div>
  <div class="split right">
    <p>Right Side</p>
  </div>
</body>

当我更改 position 时，两列消失了。

Answer 1

您只需要将您的“拆分”页面添加到一个容器中，并让该容器具有滚动条即可。

容器可以采用您用来在拆分 div 上创建滚动条的 CSS，例如

.scrollcontainer {
  width:100%;
  position: fixed;
  z-index: 1;
  overflow-x: hidden;
  /* update: instead of height: 100%, you can use this to allow for the header at the top*/
  bottom:0px;
  top:60px;
}

现在您的分割 div 只需要具备以下条件：

.split {
  width: 50%;
  position: absolute;
}

仅供参考 - 注意此处使用 position:absolute - 这是为了让您使用 left 和 right 定位拆分 divs。 ` 工作代码段

.scrollcontainer {
  width:100%;
  position: fixed;
  z-index: 1;
  overflow-x: hidden;
  height: auto;
  bottom:0px;
  top:60px;
}

.split {
  height:100%;
  width: 50%;
  position: absolute;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

<header>
    <h1>Header!</h1>
  </header>
  <div class="scrollcontainer">
  <div class="split left">
    <p>Left Side</p>
    <p>Left Side</p>
    <p>Left Side</p>
    <p>Left Side</p>
    <p>Left Side</p>
    <p>Left Side</p>
    <p>Left Side</p>
    <p>Left Side</p>
    <p>Left Side</p>
    <p>Left Side</p>
    <p>Left Side</p>
    <p>Left Side</p>
    <p>Left Side</p>
  </div>
  <div class="split right">
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side</p>
    <p>Right Side...</p>
  </div>
</div>

HTML两栏同一张卷轴

HTML two columns with one common scroll

html

css

css-multicolumn-layout