如何在滾動期間保持左側柵格列內容？

Question

我有一排兩列的引導網格設置如下所示：

<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。

我該怎麼做？

--- SOLUTION ---

感謝您的建議，但我發現對我的作品更好，沒有硬編碼填充的解決方案等

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顯示這一點。

Answer 1

的第二列

在這裏給填充是代碼

Answer 2

，可以使用兩個DIV。

• 首先是「固定」用CSS（位置：固定）
• 第二尚未定義位置

所以最前一頁不與第二雙擊自動滾屏。

但是如果你想 把DIV並排放置：在第二個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>