居中頁面不滾動的側邊欄

Question

我一直在努力，但努力得到這個佈局去使用twitter引導，我需要的是一個居中的頁面與兩側欄不滾動頁面，但中心列確實。

爲參考黑顯示在整個屏幕空間，與藍色的顯示身體內容，兩個灰色框是非滾動，但栗色通常滾動，因爲它是用於在網頁

設定的主要內容任何固定位置的列都會使它們重疊，並嘗試使用傳統的側邊欄​​將其帶到視圖空間的邊緣，這也是不希望的。有任何想法嗎？

Answer 1

我做了一個小提琴，可以幫助你實現這一點。但我沒有使用Bootstrap。您可以輕鬆地在引導網格上進行這些更改。

JSFIddle

Answer 2

我認爲這可能滿足您的需要。這並不完美，但這是一個起點。

HTML

<div class="container"> 
    <div class="row"> 
    <div class="first col-xs-3"> 
     <div class="fixed"> 
      <p>Fixed</p> 
     </div> 
    </div> 
    <div class="col-xs-6 scroll"> 
     <p>PUT A NOVEL IN HERE</p> 
    </div> 
    <div class="second col-xs-3"> 
     <div class="fixed second"> 
      <p>Fixed</p> 
     </div> 
    </div> 
    </div> 
</div> 

CSS

html, body { 
    background:#CCCCCC; 
    height:100%; 
} 
.container, .row { 
    height:100%; 
} 
.fixed { 
    height:100%; 
    background:#FFFFFF; 
    position:fixed; 
    width:20%; 
} 
.scroll { 
    height:100%; 
    background:#000000; 
    overflow:auto; 
} 
.second.fixed{ 
    margin-left:-15px; 
} 

DEMO

Fiddle

Answer 3

的例子顯示使用通用scollbar（在瀏覽器框架的右側，而不是在中間），現場演示：http://jsfiddle.net/hm4do8mg/

HTML

<div class="left"> 
    <p>left</p> 
</div> 

<div class="midd"> 
    <p style="height:2000px;">midd</p> 
    <p>bottom</p> 
</div> 

<div class="righ"> 
    <p>righ</p> 
</div> 

CSS

body, p { 
    text-align: center; 
    margin: 0; 
} 

.left, 
.righ { 
    background: lightgrey; 
    position: fixed; 
} 

.left { 
    width: 20%; 
} 

.midd { 
    background: paleturquoise; 
    width: 60%; 
    position: relative; 
    left: 20%; 
    top: 0; 
} 

.righ { 
    width: 20%; 
    right: 0; 
    top: 0; 
} 

的你問的佈局，是一種舊的時尚風格，如。您也可以使用<table>來做到這一點，它是最堅實，最簡單的方式（如果您需要移動版本，請忽略它）。