html - 带有非滚动侧边栏的居中页面

Question

我一直在努力，但很难使用 Twitter Bootstrap 来实现这种布局，我需要的是一个居中的页面，它有两个不随页面滚动的侧栏，但一个中心栏会随页面滚动。

作为引用，黑色显示整个屏幕空间，蓝色显示主体内容，两个灰色框不滚动，但栗色正常滚动，因为它是页面的主要内容

将任何列设置为固定位置会使它们重叠，而尝试使用传统的侧边栏​​会将其带到 View 空间的边缘，这也是不希望的。有什么想法吗？

Answer 1

示例展示了如何使用通用滚动条(在浏览器框架的右侧，而不是在中间)，现场演示: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;
}

你问的布局，有点像<iframe>这样的老式风格。 .您也可以使用 <table>做到这一点，对我来说是最扎实，最简单的方法(如果您需要移动版本，请忽略它)。