HTML两列，带一个常用滚动条

问题描述

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

.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时，两列消失。

解决方法

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

容器可以使用您用来在拆分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来放置分割div。 ` 工作片段

.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>

css-multicolumn-layout html

HTML两列，带一个常用滚动条

问题描述

解决方法

相关问答