0

I'm creating a layout based on https://github.com/puikinsh/gentelella I'm trying to make three column template with second column being scrollable.

This is mockup of layout. enter image description here basically, I need to create two panel inside

I tried min-height to 100% and overflow hidden on parent. right_col having overflow-y to scroll.

enter image description here Here is the issue. The second column looks to have scroll but still takes up the full length required to display content.

here is the my code

Here is the my css

user3431327
  • 135
  • 4
  • 14

1 Answers1

0

If you give the container element a height of 100vh, then you can give it's children 100% height.

vh is a measuring unit of the viewport height which can give you something to base subsequent relative measurements.

Your problem is that the scrollable element doesn't have the correct height. Setting max-height or height will help the situation.

In this example, give all columns a min-height of 100%, but then give the column you want to scroll a max-height of 100% and scroll overflow-y e.g.

.column {
  display: inline-block;
  width: 33%;
  min-height: 100%;
  vertical-align: top;
  margin: auto;
  font-size: 3em; /* This is just for the example, so we have enough stuff to scroll */
}
#column2 {
  overflow-y: scroll;
  max-height: 100%;
}
<div class="column" id="column1">
</div>
<div class="column" id="column2">
  content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>content to be scrolled
  <br>
</div>
<div class="column" id="column3">
</div>

The key is defining the height of the element whose contents you wish to scroll.

Matt
  • 84
  • 5