我有一个带有一行和两列的引导网格设置，如下所示：
<div id="main">
<div class="row">
<div class="col-sm-2 first-col">
How to make this column fixed during scroll?
</div>
<div class="col-sm-10 second-col">
This contains a lot of text...
</div>
</div>
它的风格是这样的：
#main {
height: 200px;
overflow-y:scroll;
}
.row {
height: 100%;
}
.first-col {
border-right: 1px solid;
height: 100%;
}
我想要的是第一列（包括边框黑线）在向上和向下滚动时保持固定，因此只有第二列滚动。
这是显示问题的fiddle。
我该怎么做？
---解决方案---
感谢您的建议，但我找到了一个更适合我的解决方案，没有硬编码填充等。
CSS：
我做的是将滚动条从#main移动到.second-col。现在，第二列是唯一滚动的列，第1列保持固定。
#main {
height: 200px;
overflow-y:hidden;
}
.row {
height: 100%;
}
.first-col {
border-right: 1px solid;
height: 100%;
}
.second-col {
overflow-y: scroll;
height: 100%
}
这是显示此内容的fiddle。
答案 0 :(得分：1)
为第二列提供填充
这是代码
答案 1 :(得分：0)
你可以使用两个DIV。
所以fisrt不会与第二个人一起流口水。
但如果你愿意的话 让DIV并排：使用＆＃34; float＆＃34;在第二个DIV上的位置。
答案 2 :(得分：0)
您可以使用百分比尝试这样的事情，以避免边缘硬编码。
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
#main {
height: 200px;
overflow-y:scroll;
}
.row {
height: 100%;
}
.first-col {
border-right: 1px solid;
width: 19%;
position:fixed;
}
.second-col{
width:80%;
margin-left:20%;
top:0px;
bottom:0px;
left:0px;
}<div id="main">
<div class="row">
<div class="col-sm-2 first-col">
How to make this column fixed during scroll?
</div>
<div class="col-sm-10 second-col">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum eget tellus et egestas. Donec augue sapien, aliquet vitae fermentum at, aliquet iaculis urna. Pellentesque dignissim eleifend erat vel tincidunt. Suspendisse et luctus augue, a facilisis ipsum. Donec dui leo, cursus pulvinar efficitur sed, eleifend non ex. Phasellus vestibulum erat at erat rhoncus ornare. Ut interdum auctor odio. Fusce lacinia arcu ligula, eu sollicitudin justo venenatis sed. Curabitur imperdiet lorem et massa bibendum consectetur. Nulla non tempus ligula. Proin vestibulum lacus at sodales sodales. Cras ultricies varius massa, et aliquam eros aliquet accumsan. Vivamus non neque nibh. Nullam ac tempor sem. Morbi mollis odio a nulla pulvinar euismod.
Aenean quis velit in nibh rutrum dapibus. Pellentesque sollicitudin diam consectetur quam egestas congue. Proin vestibulum porttitor purus, eget molestie velit finibus vitae. Nunc eget ultrices velit. Aenean vestibulum nunc ut commodo aliquet. Etiam at urna pellentesque libero vestibulum semper. Fusce accumsan urna ac ultricies laoreet. Duis mauris ligula, venenatis vitae egestas sed, bibendum vitae lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
In pretium gravida varius. Mauris dui dui, pharetra at dolor nec, auctor molestie nibh. Vestibulum sagittis, metus ut hendrerit maximus, libero velit aliquet neque, ultrices rhoncus metus metus sit amet orci. Fusce in diam non dolor posuere scelerisque nec sed turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris at condimentum nibh. Sed sit amet mauris mauris. Nulla vestibulum molestie commodo. Fusce sit amet ipsum at ipsum rutrum ornare quis sollicitudin arcu. Nullam ut ipsum sed augue convallis volutpat sit amet sed mauris. Morbi quis augue quis augue iaculis lobortis sollicitudin in tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum eget tellus et egestas. Donec augue sapien, aliquet vitae fermentum at, aliquet iaculis urna. Pellentesque dignissim eleifend erat vel tincidunt. Suspendisse et luctus augue, a facilisis ipsum. Donec dui leo, cursus pulvinar efficitur sed, eleifend non ex. Phasellus vestibulum erat at erat rhoncus ornare. Ut interdum auctor odio. Fusce lacinia arcu ligula, eu sollicitudin justo venenatis sed. Curabitur imperdiet lorem et massa bibendum consectetur. Nulla non tempus ligula. Proin vestibulum lacus at sodales sodales. Cras ultricies varius massa, et aliquam eros aliquet accumsan. Vivamus non neque nibh. Nullam ac tempor sem. Morbi mollis odio a nulla pulvinar euismod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum eget tellus et egestas. Donec augue sapien, aliquet vitae fermentum at, aliquet iaculis urna. Pellentesque dignissim eleifend erat vel tincidunt. Suspendisse et luctus augue, a facilisis ipsum. Donec dui leo, cursus pulvinar efficitur sed, eleifend non ex. Phasellus vestibulum erat at erat rhoncus ornare. Ut interdum auctor odio. Fusce lacinia arcu ligula, eu sollicitudin justo venenatis sed. Curabitur imperdiet lorem et massa bibendum consectetur. Nulla non tempus ligula. Proin vestibulum lacus at sodales sodales. Cras ultricies varius massa, et aliquam eros aliquet accumsan. Vivamus non neque nibh. Nullam ac tempor sem. Morbi mollis odio a nulla pulvinar euismod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum eget tellus et egestas. Donec augue sapien, aliquet vitae fermentum at, aliquet iaculis urna. Pellentesque dignissim eleifend erat vel tincidunt. Suspendisse et luctus augue, a facilisis ipsum. Donec dui leo, cursus pulvinar efficitur sed, eleifend non ex. Phasellus vestibulum erat at erat rhoncus ornare. Ut interdum auctor odio. Fusce lacinia arcu ligula, eu sollicitudin justo venenatis sed. Curabitur imperdiet lorem et massa bibendum consectetur. Nulla non tempus ligula. Proin vestibulum lacus at sodales sodales. Cras ultricies varius massa, et aliquam eros aliquet accumsan. Vivamus non neque nibh. Nullam ac tempor sem. Morbi mollis odio a nulla pulvinar euismod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum eget tellus et egestas. Donec augue sapien, aliquet vitae fermentum at, aliquet iaculis urna. Pellentesque dignissim eleifend erat vel tincidunt. Suspendisse et luctus augue, a facilisis ipsum. Donec dui leo, cursus pulvinar efficitur sed, eleifend non ex. Phasellus vestibulum erat at erat rhoncus ornare. Ut interdum auctor odio. Fusce lacinia arcu ligula, eu sollicitudin justo venenatis sed. Curabitur imperdiet lorem et massa bibendum consectetur. Nulla non tempus ligula. Proin vestibulum lacus at sodales sodales. Cras ultricies varius massa, et aliquam eros aliquet accumsan. Vivamus non neque nibh. Nullam ac tempor sem. Morbi mollis odio a nulla pulvinar euismod.
</div>
</div>
</div>