居中页面不滚动的侧边栏

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>来做到这一点，它是最坚实，最简单的方式（如果您需要移动版本，请忽略它）。