スクロール中に左グリッドの列の内容を保持する方法はありますか？

Question

ここに示したように、私は、ブートストラップグリッド1行でセットアップと2つの列を持っている：

<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%; 
} 

は（を含む最初の列にあります境界線の黒線）を上下にスクロールするときに固定されているので、2番目の列だけがスクロールします。

ここには、問題を示すfiddleがあります。

どうすればいいですか？

--- SOLUTION ---ご提案のための

おかげで、私は私のためにうまく機能、およびハードコードされたパディングのない解決策を見つけたなど

CSS：

何私は、スクロールバーを#mainから.second-colに移動することでした。今この2番目の列はスクロールする唯一のものであり、列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があります。

Answer 1

は、ここに第二のカラム

ためのパディングを与える次の2つのDIVを使用することができ、コード

Answer 2

です。

第が定義されていない位置

だから・ファーストは、第二とscroolない：

• 最初は、CSS（固定位置）と「固定」されています。

  DIVを並べて配置したい場合は、2番目のDIVに「float」の位置を使用します。

Answer 3

マージンでハードコードを避けるために、パーセンテージを使用してこのようなことを試すことができます。

/* 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>