设置侧边栏不适合

Question

我正在尝试在页面内容流入的浏览器的两侧制作静态条带。我正在使用Bootstrap。我在左边有一个单元格，在右边有一个单元格用于静态内容。这些单元格包含另一个单元格沿着页面，但是容器单元格的宽度为50％。

我的代码如下：

<div class="col-lg-1 col-md-1 col-sm-1">
        <div style="background-image: url(./Content/images/strip_left.jpg); background-repeat: repeat-y; width: 20%; float: left; min-height:100%; position:fixed; top:0px; bottom:0px;">&nbsp;</div>
    </div>
<div class="col-lg-4 col-md-6 col-sm-8 col-lg-offset-3 col-md-offset-2 col-sm-offset-1">
    <!-- This is where the page content flows -->
</div>
<div class="col-lg-1 col-md-1 col-sm-1" style="float:right; margin:0px; right:0px; text-align:right;">
        <div style="background-image: url(./Content/images/strip_right.jpg); background-repeat: repeat-y; width: 20%; float: right; min-height:100%; position:fixed; top:0px; bottom:0px;">&nbsp;</div>
</div>

问题是我得到以下内容：

左侧没问题。但我还没有能够缩小右边的差距。浮动，边距，填充不起作用。我该如何解决这个问题？

P.S。 ：绿色区域是最左边和最右边的div。黄色区域是内容区域。白色区域在这里我将背景图像设置为条纹。

Answer 1

我认为你使用浮动和固定位置遇到了问题。

position: fixed; /* use this only if you want the element fixed positioned in relation to the window */

这是一个简化的小提琴：https://jsfiddle.net/ro5hvwub/2

这是你在找什么？