CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
hellotoyou
hellotoyou

Reputation: 33

Bootstrap columns that don't scroll

I have a webpage made with bootstrap, say i'm using 4 columns on the left and 6 on the right. I need for the 4 on the left to not scroll. How do I acheive this?

I know I can use

class="affix"

On the left column, but the problem with this is that the left column no longer resizes when the size of the viewport changes.

Upvotes: 0

Views: 594

Answers (1)

Banzay
Banzay

Reputation: 9470

Here is a solution. You need to set overflow: auto and define nested div in the right column:

.cell {
  background: lightgreen;
  border: 1px solid teal;
  height: 100vh;
  overflow: auto;
}
.data_cont {
  height: 200vh;
  background: lightblue;
  margin: 0 -15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4 col-xs-offset-1 cell">
      left column
    </div>
    <div class="col-xs-6 cell">
      <div class="data_cont">data in the right column</div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions