I have set up a bootstrap grid with one row and two columns like this:
<div id="main">
<div class="row">
<div class="col-sm-2 first-col">
Is there a way to keep this column fixed while scrolling?
</div>
<div class="col-sm-10 second-col">
This column contains a large amount of text...
</div>
</div>
The styling for this setup is as follows:
#main {
height: 200px;
overflow-y:scroll;
}
.row {
height: 100%;
}
.first-col {
border-right: 1px solid;
height: 100%;
}
My goal is to have the first column (including the black border line) remain fixed while scrolling, with only the second column being scrollable.
You can see the issue in action in this JSFiddle.
Can anyone provide a solution?
--- SOLUTION ---
After considering your suggestions, I have found an alternative solution that works best for me, without relying on hardcoded padding or other tricks.
Here is the updated CSS:
To achieve the desired effect, I moved the scrollbar from #main to .second-col. This way, the second column is the only one that scrolls, keeping the first column fixed.
#main {
height: 200px;
overflow-y:hidden;
}
.row {
height: 100%;
}
.first-col {
border-right: 1px solid;
height: 100%;
}
.second-col {
overflow-y: scroll;
height: 100%
}
You can view the updated layout in this JSFiddle.