Question

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

我创建了演示

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>

Answer 1

我认为只有css才能解决这个问题。您希望水平滚动条始终位于页面底部，您的子容器必须具有固定高度100vh。然后，当您向下或向上滚动时，使用javascript设置子容器的高度。希望它有所帮助

Answer 2

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

如果没有JS，那就不可能。

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

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

2 个答案: