中心div滾動和左，右分區固定

我已經創建了自舉網格格式的佈局。我想我的中心div是col-md-6應該是可滾動的，左右div應該是固定的。我也檢查過這個問題how to make a left and right div fixed and center div scrollable但是，當我嘗試這個技巧，我沒有得到預期的結果，因爲自舉網格格式。中心div滾動和左，右分區固定

這裏是我的html代碼：

/* Using this CSS is giving me unexpected result.*/ 
 

 
.left { 
 
    position: fixed; 
 
    left: 0px; 
 
    float: left; 
 
} 
 

 
.right { 
 
    position: fixed; 
 
    right: 0px; 
 
    float: right; 
 
} 
 

 
.center { 
 
    position: absolute; 
 
    left: value; 
 
    float: left; 
 
}

<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> 
 
    LEFT DIV 
 
</div> 
 

 
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
 
    MIDDLE DIV 
 
</div> 
 

 
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> 
 
    RIGHT DIV 
 
</div>

任何形式的幫助將高度讚賞。由於

來源

2017-08-09 Aryan Shaw

請添加類'左，中，right'到的HTML代碼發佈的div。 –

沒有一個答案符合正確的bootstrap實現，爲列使用'col-sm-12 col-xs-12'的目的是完全荒謬的。 – kolunar

試試這個代碼

/* Using this CSS is giving me unexpected result.*/ 
 

 
.main { 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.col-lg-3 { 
 
    float: left; 
 
    width: 33%; 
 
} 
 

 
.col-lg-6 { 
 
    float: left; 
 
    width: 33%; 
 
    height: 100px; 
 
    overflow-y: scroll; 
 
}

<div class="main"> 
 
    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> 
 
    LEFT DIV 
 
    </div> 
 

 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
 
    MIDDLE DIV 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    <p>test</p> 
 
    </div> 
 

 
    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> 
 
    RIGHT DIV 
 
    </div> 
 
</div>

試試這個jsfiddle code：code for center div scroll

來源

2017-08-09 06:06:30 Bhargav

但滾動條應該在右側。像fb –

現在我把jones小提琴的athore代碼檢查它 – Bhargav

/* Using this CSS is giving me unexpected result.*/ 
 

 
.outer_div{ 
 
    height:200px; 
 
    overflow:auto; 
 
    width:100%; 
 
} 
 

 
.left { 
 
    position: fixed; 
 
    float: left; 
 
    height:100%; 
 
    width:25%; 
 
    
 
} 
 

 
.right { 
 
    position: fixed; 
 
    float: right; 
 
    height:100%; 
 
    width:25%; 
 
    right:0; 
 
    
 
} 
 

 
.center { 
 
    float: left; 
 
    width:50%; 
 
    position:relative; 
 
    left:25%; 
 
    
 
    height:100%; 
 
}

<div class="outer_div"> 
 

 
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> 
 
    <div class="left">Left Div</div> 
 
</div> 
 

 
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
 
    
 
    <div class="center"> 
 
    MIDDLE Div 
 
    <div> 
 
    <p>Some Text</p> 
 
    <p>Some Text</p> 
 
    <p>Some Text</p> 
 
    <p>Some Text</p> 
 
    <p>Some Text</p> 
 
    <p>Some Text</p> 
 
    <p>Some Text</p> 
 
    </div> 
 
    </div> 
 
    
 
    
 
</div> 
 

 
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> 
 
    <div class="right">Right Div</div> 
 
</div> 
 
</div>

我這與你正在尋找的一樣嗎？

希望這會有所幫助。

來源

2017-08-09 06:16:41

沒有兄弟。我不想在頁面中間的滾動條。我想要最右邊的那個scollbar。 –

你在你的問題中寫過'我希望我的中心div是col-md-6應該是可滾動的，左右div應該是固定的。那是什麼意思？ –

@AryanShaw，已更新的答案。 –

使用此代碼： -

CSS： -

.left_div { 
    position: fixed; 
    left: 0px; 
    float: left; 
    border: 1px solid rgba(204, 204, 204, 0.32); 
    width: 200px; 
    height: 100%; 
    text-align: justify; 
    padding: 10px; 
} 

.right_div { 
    position: fixed; 
    right: 0px; 
    float: right; 
    border: 1px solid rgba(204, 204, 204, 0.32); 
    width: 200px; 
    height: 100%; 
    text-align: justify; 
    padding: 10px; 
} 

.center_div { 
    position: relative; 
    text-align: justify; 
    border: 1px solid rgba(204, 204, 204, 0.32); 
    width: auto; 
    height: 100%; 
    padding: 10px; 
}

HTML： -

<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> 
     <div class="left_div"> left div </div> 
    </div> 
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
     <div class="center_div"> left div </div> 
    </div> 
    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> 
     <div class="right_div"> left div </div> 
    </div>

來源

2017-08-09 06:50:33

應該有一個更好的解決方案在其他地方與正確使用引導程序

例如對於例如0

無論如何，這裏是我的2美分。

.container-fluid.main{ 
 
    height: 100%; 
 
    overflow: auto; 
 
} 
 
.left,.right{ 
 
    background-color: #ddd; 
 
    min-height: 200px; 
 
} 
 
.center { 
 
    background-color: #eee; 
 
}

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
</head> 
 
<body> 
 

 
<div class="container-fluid main"> 
 
    <div class="row"> 
 
    
 
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> 
 
     <div class="left affix"> 
 
     <div class="well col-lg-3 col-md-3 col-sm-3 col-xs-3"> 
 
      <h2>LEFT DIV</h2> 
 
<p>Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</p><br /> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
 
     <div class="center"> 
 
     <h2>MIDDLE DIV</h2> 
 
<p>Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</p><br /> 
 
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p><br /> 
 
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits. </p><br /> 
 
<p>Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</p><br /> 
 
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p><br /> 
 
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits. </p><br /> 
 
<p>Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</p><br /> 
 
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p><br /> 
 
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits. </p><br /> 
 
<p>Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</p><br /> 
 
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p><br /> 
 
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits. </p><br /> 
 
<p>Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</p><br /> 
 
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p><br /> 
 
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits. </p><br /> 
 
<p>Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</p><br /> 
 
<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p><br /> 
 
<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits. </p><br /> 
 
     </p>  
 
     </div> 
 
    </div> 
 

 
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> 
 
     <div class="right affix"> 
 
     <div class="well col-xs-12"> 
 
      <h2>RIGHT DIV</h2> 
 
<p>Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.</p><br /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

參見： Bootstrap Right and Left Sidebars Fixed snippet

來源

2017-08-09 08:56:06 kolunar

中心div滾動和左，右分區固定

回答

相關問題