Question

我一直在尝试，但是努力让这个布局使用twitter bootstrap，我需要的是一个居中的页面，其中两个侧栏不会滚动页面而是一个中心列。

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

enter image description here

设置任何固定位置的列会使它们重叠，并尝试使用传统的侧边栏将其带到视图空间的边缘，这也是不受欢迎的。任何想法？

Answer 1

示例显示使用通用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;
}

你问的布局是一种像<iframe>这样的旧时尚风格。你也可以使用<table>来做这件事，这对我来说是最坚实，最简单的方式（如果你需要移动版本，请忽略它）。

Answer 2

我做了一个小提琴，可以帮助你实现这一目标。但我没有使用过Bootstrap。您可以在引导网格上轻松进行这些更改。

JSFIddle

Answer 3

我认为这可以满足您的需求。它并不完美，但它是一个起点。

<强> 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;
}

<强>样本

Fiddle

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

3 个答案: