两列布局，一个公共垂直滚动条和两个水平滚动条答案

【问题标题】：Two column layout with one common vertical scrollbar and two horizontal scrollbars两列布局，一个公共垂直滚动条和两个水平滚动条
【发布时间】：2018-03-13 14:30:55
【问题描述】：

我想用一个同步滚动内容的垂直滚动条创建两列布局。页面中的每一列都应该有自己的水平滚动条，位于窗口底部（始终可见）。

我创建了演示

http://plnkr.co/edit/G0bz2zUrVvH7enYDGLiy?p=preview.

此示例按要求显示垂直滚动条，但水平滚动条位置错误，因为我必须向下滚动才能看到水平滚动条。右侧位置固定在页面底部。

你能帮帮我吗？只使用css和html可以实现这个请求吗？

html,
            body,
            .main-container {
              margin: 0;
              height: 100%;
              overflow: hidden;
            }
            
            .main-container {
              overflow-y: scroll;
              width: 100%;
              clear: both;
            }
            
            .sub-container {
              width: 48%;
              min-height: 100%;
              float: left;
              overflow-x: scroll;
              overflow-y: hidden;
            }
            
            .sub-container.new {
              float: right
            }

<!DOCTYPE html>
    <html>
    <body>
      <div class="main-container">
        <div class="original sub-container">
          <div>
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          </div>
        </div>
        <div class="new sub-container">
          <div>
          <div>
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          .. very long multiline text..<br />
          </div>
        </div>
      </div>
    </body>
    </html>

【问题讨论】：

horizontals scrollbars has wrong position 你这是什么意思？？
@jupin 你说两个水平滚动条都应该在页面的底部，但是你抱怨右边的水平滚动条在页面的底部。你需要澄清这一点。
不清楚你在问什么。
水平滚动条应该位于页面底部（固定）并且应该始终可见。问题是：如果列包含长文本，那么我必须通过垂直滚动条向下滚动才能看到水平滚动条。见 plunkr
我不知道用例是什么，但这似乎是非常糟糕的用户体验。考虑使用媒体查询将列堆叠在较小的屏幕尺寸上。

标签： html css

【解决方案1】：

我认为仅使用 css 没有任何解决方案。您希望水平滚动条始终位于页面底部，您的子容器必须具有固定高度 100vh。然后，当您向下或向上滚动时，您使用 javascript 设置子容器的高度。希望对你有帮助

【讨论】：

【解决方案2】：

您可以将max-height: 99vh; 放在.sub-container 上，但是您需要删除overflow-y: hidden; 或将其更改为overflow-y: auto;，这会导致您有2 个垂直滚动条。

所以没有JS是不可能的。

我清理了你的代码并向你展示了我在这个 plunkr 中的意思：http://plnkr.co/edit/bAVeL8zOu8Ruc9u2YFhI?p=preview

【讨论】：