CSS - 两个具有滚动内容窗格的非滚动列

Question

我有一种情况，我设计了一个三列布局，它工作正常。但是我被要求将它放到两个菜单窗格（左侧和中间）“固定”的位置，不要滚动其余的内容。

我一直在苦苦挣扎;简单地使它们position: fixed不起作用，它会抛弃整个设计和列的高度。我开始认为这不可能在我的特定布局上执行，但我想我会向更聪明的人寻求帮助。

我发布了我的代码，以及指向jsFiddle的链接。

jsFiddle

<div id="top"></div>
<div id="main">
    <div id="left">
        <div>menu items</div>
    </div>
    <div id="center">
        <h3>sub menu items</h3>

    </div>
    <div id="right">
        <header>content header</header>
        <article>content body</article>
    </div>
</div>

#top {
    background-color: #25282b;
    height: 64px;
}
#main {
    width: 100%;
    display: table;
}
#left, #center, #right {
    display: table-cell;
    margin: 0px;
}
#left {
    width: 150px;
    background-color: rgba(38, 46, 51, 1);
    color: #7d8285;
}
#left div:first-child {
    padding-top: 10px;
}
#center {
    width: 228px;
    background-color: rgba(57, 65, 71, 1);
    color: #999ea1;
}
#center div:first-child {
    padding: 15px;
}
#center div:first-child h3 {
    color: #fff;
    margin-bottom: 2px;
}
#right {
    background-color: rgba(255, 255, 255, 1);
    vertical-align: top;
}
#right header {
    background-color: #3e7aa5;
    height: 32px;
}
#right article {
    padding: 10px;
    background-color: #fff;
}