HTML two columns with one common scroll

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.

Solution

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>