1

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.

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

1 Answer 1

Reset to default
2

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>

Improve this answer
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.