HTML two columns with one common scroll

Question

I need to have the page separated in two columns but I want them to share the same scroll. I need that if one of the columns gets too big and I scroll down, the smaller one goes down too even if that side shows nothing. I can only find people asking how to get two separated scrolls but that's what I have right now.

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

When I change the position, the two columns disappear.

Do you need the code inside "split left" and "split right"? It's a lot with Drop-Down Lists, tables and photos. — André Dias, Aug 21 '20 at 15:27
give the fix `height` to `.split` class.. such as a `200px;` — نور, Aug 21 '20 at 15:32
now the scrolls are still separated and the columns dont go till the end of the page — André Dias, Aug 21 '20 at 15:37
it's not clear to me what you need.. will you share a screenshot or pic of expected result ? — نور, Aug 21 '20 at 15:41

FluffyKitten · Accepted Answer · 2020-08-21T15:57:53.287

You just need to add your "split" page into a container and let the container have the scroll bar.

The container can take the CSS you were using to create the scrollbar on your split divs, e.g.

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

Now your split div just need to have the following:

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

FYI - note the use of position:absolute here - this is to let you position the split divs using left and right. ` Working Snippet

.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 two columns with one common scroll

1 Answers1