HTML 3在容器内部进行div，只有中间div具有无限滚动

Question

图像以下场景：

<div class="header">Menu</div>  

<div class="container">  <!-- bootstrap 940px -->
  <div class="left-column">LEFT</div>
  <div class="center-column">CENTER (infinite scrolling)</div>
  <div class="right-column">RIGHT</div>
</div> 

我的目标是让HEADER始终在TOP上，所以我使用

.header {
  height: 50px;
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
}

这很有效。

现在我需要修复左右列，并且需要滚动中间一列，所有这些都发生在容器内。

我在网上看到的所有样本都显示了一个使用绝对位置的左列但是当我这样做时，该列出现在父容器外面，宽度为940px

这里是 [JSFiddle] 1 !!

目标是： 1） RED Div总是 FIXED TOP
2） BLUE Div NOT 滚动
3） GREEN Div NOT 滚动
4） ORANGE Div ... 无限滚动

为什么这不起作用？

Answer 1

position: relative;

中的CSS中缺少.container element;

.container { position: relative; }

修改

像this fiddle

这样的东西

编辑2

选中此fiddle

Answer 2

http://jsfiddle.net/xhLdxjn5/1/

.container { position: relative; }