How to disable vertical scroll in bootstrap column

Question

I have two bootstrap columns \"left\" and \"right\"; I want to fix the left column with the screen and disable scroll. but i want to enable scroll in the right column which

Answer 1

Just add positon:fixed and height:100% to your left column and add data to your right column

https://codepen.io/anon/pen/JJgjqX

Answer 2

You can achieve this by simply applying some CSS:

• Both columns should have a height of your complete viewport -> height: 100vh;
• The scrollable column should also have overflow-y set to scroll.

Here is an example: https://jsfiddle.net/kLu69r7t/

.fixed-col {
  height: 100vh;
}

.scrollable-col {
  height: 100vh;
  overflow-y: scroll;
}

Of course you need to give the columns the respective classes.

Answer 3

Just make the left column fixed. You don't need to use overflow-y, it is used when you need scrolling within the element.

.fixed {position: fixed !important; top: 0px; left: 0px; bottom: 0px; background: red;}
.scrollable {background: yellow;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-xs-3 fixed">
		Fixed
	</div>
	<div class="col-xs-9 pull-right scrollable">
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	<br /><br /><br /><br /><br />Scrollable
	</div>