Wie wird der Inhalt der linken Rasterspalte beim Scrollen beibehalten?

Question

Ich habe einen Bootstrap-Raster-Setup mit einer Zeile und zwei Spalten wie hier gezeigt:

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

es so gestylt wurde:

#main { 
    height: 200px; 
    overflow-y:scroll; 
} 

.row { 
    height: 100%; 
} 

.first-col { 
    border-right: 1px solid; 
    height: 100%; 
} 

Was ich will, für die erste Spalte ist (einschließlich der schwarze Linie), um beim Scrollen nach oben und unten fixiert zu bleiben, sodass nur die zweite Spalte scrollt.

Hier ist eine fiddle zeigt das Problem.

Wie kann ich das tun?

--- --- LÖSUNG

Vielen Dank für Ihre Anregungen, aber ich fand eine Lösung, die für mich besser funktioniert, und ohne hartkodierte Polsterung usw.

CSS:

Was Ich habe die Bildlaufleiste von #main in die zweite Spalte verschoben. Jetzt ist diese zweite Spalte die einzige, die scrollt, und Spalte 1 bleibt fixiert.

#main { 
    height: 200px; 
    overflow-y:hidden; 
} 

.row { 
    height: 100%; 
} 

.first-col { 
    border-right: 1px solid; 
    height: 100%; 
} 

.second-col { 
    overflow-y: scroll; 
    height: 100% 
} 

Hier ist eine fiddle zeigt dies.

Answer 1

Give Polsterung für die zweite Säule

hier ist der Code

Answer 2

Sie zwei DIV verwenden können.

• Die erste ist "fest" mit CSS (Position: fest)
• Die zweite nicht definierte Position

So ist die fisrt mit dem zweiten nicht scrool.

Aber wenn Sie möchten setzen Sie die DIV's nebeneinander: Verwenden Sie "float" Position auf dem zweiten DIV.

Answer 3

Sie können etwas wie diese mit Prozentsätzen versuchen, um Hardcoding in einem Rand zu vermeiden.

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