CODEWITHSUNDEEP
htmlcssflexbox
pjdupreez
pjdupreez

Reputation: 717

Independently Scrollable DIVs in a column

I have a div (main content area) which has 2 div's (top and bottom)

I need to display both the top and bottom div's on the page but need them both to take up the same amount of space (50/50). I also need them to be scrollable when their content is longer than the visible space available.

I get the 2 divs to align on top and on on the bottom, but they do not take up the same amount of space (50/50). In addition, if one of the has more content than the other, it grows and I end up having to scroll the page and not the div as I would like.

Here is my code:

#content {
  height: 100%;
}

#row {
  height: 100%;
  overflow-y: scroll;
}
<div id="content">
  <div id="row">
    top content
  </div>
  <div id="row">
    bottom content
  </div>
</div>

I have also tried flex like this:

#content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#row {
  width: 100%;
  flex: 1;
  overflow-y: scroll;
}
<div id="content">
  <div id="row">
    top content
  </div>
  <div id="row">
    bottom content
  </div>
</div>

Upvotes: 1

Views: 78

Answers (3)

Arkellys
Arkellys

Reputation: 7780

Here is how you can do this using flexbox :

#content {
  height: 300px;
  width: 400px;
  display: flex;
  flex-direction: column;
  background-color: red;
  margin: auto;
  padding: 10px;
}

#top, #bottom {
  flex: 1;
  overflow-y: auto;
}

#top { background-color: yellow; }
#bottom { background-color: green; }
<div id="content">
  <div id="top">
    Sed pharetra lectus id dignissim interdum. Aliquam et tincidunt diam. Ut vitae cursus ipsum. Integer non felis ex. Nunc eget eros eros. Nam aliquet fermentum quam, pretium auctor nisl aliquet molestie. Cras gravida at velit dapibus porttitor.
  </div>
  
  <div id="bottom">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus magna tellus, malesuada at tempor a, commodo ut lacus. Integer tincidunt neque nunc, a rhoncus felis luctus nec. Nulla in ante nisl. Donec vel erat at sapien maximus tincidunt. Proin ac metus id diam consequat congue. Nulla ac vulputate erat. Vestibulum dui metus, egestas nec lorem ac, venenatis aliquet est. Nulla facilisi. Integer justo massa, vulputate non mauris et, venenatis gravida leo. Vestibulum sagittis suscipit gravida. Duis in viverra dui.
    Sed pharetra lectus id dignissim interdum. Aliquam et tincidunt diam. Ut vitae cursus ipsum. Integer non felis ex. Nunc eget eros eros. Nam aliquet fermentum quam, pretium auctor nisl aliquet molestie. Cras gravida at velit dapibus porttitor. Aliquam aliquam est eu aliquam tincidunt. Maecenas volutpat pellentesque est, non imperdiet ante rutrum ut. Praesent vehicula dui ligula, sit amet ornare tortor ultrices eu. Nullam in tortor at nunc tristique fermentum. Donec justo mi, ultrices sed finibus id, finibus non nibh. Nunc sodales, nibh id porta iaculis, velit sapien vehicula purus, sit amet faucibus augue lectus at massa. Cras nec mauris eu sapien fermentum condimentum sed nec neque.
  </div>
</div>

The flex: 1; property on #top and #bottom tells them to share the space equally. With overflow-y: auto; they will not grow out of the #content, thus keeping an equal height.

Upvotes: 1

Electron
Electron

Reputation: 1109

Viewpoint Height (VH) 100%

Making your main content area (the body in my example), 100vh will make it 100% of the page height. Then set your divs to 50%;

enter image description here

body {
  height: 100vh;
}

#content {
  width: 100%;
  display: inline-block;
  height: 100%;
}

#row {
  color: #fff;
  height: 50%;
  overflow-y: scroll;
  background: #3b5998;

}

#row:first-of-type {
    background: red;
}
#row p {
padding-left:10px;
}
<body>
  <div id="content">
    <div id="row">
      <p>Top Content</p>
    </div>
    <div id="row">
      <p>Bottom Content</p>
    </div>
  </div>
</body>

body {
  height: 100vh;
}

#content {
  width: 100%;
  display: inline-block;
  height: 100%;
}

#row {
  color: #fff;
  height: 50%;
  overflow-y: scroll;
  background: #3b5998;
}

#row:first-of-type {
  background: red;
}

#row p {
  padding-left: 10px;
}
<body>
  <div id="content">
    <div id="row">
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
      <p>Top Content</p>
    </div>
    <div id="row">
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
      <p>Bottom Content</p>
    </div>
  </div>
</body>

Upvotes: 2

Finrod
Finrod

Reputation: 2550

No need to use flexboxes for that. You can set the height of the rows to 50% of the viewport using vh unit:

.row {
  height: 50vh;
  padding: 5px;
  overflow-y: auto; /* Or scroll if you want to always display the scrollbar */
}

.top {
  background-color: #FFCDD2;
  color: #B71C1C
}

.bottom {
  background-color: #BBDEFB;
  color: #0D47A1
}
<div class="content">
  <div class="row top">top content</div>
  <div class="row bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

Side note: html ids should be unique, if you need multiple elements with the same id, you should then use a class

Upvotes: 0

Related Questions