html - 3 Pane 布局(不是 3 列)

Question

我想要布局，其结构类似于 Thunderbird 经典 View ( http://kmgerich.com/pinstripe/screenshots/mail/classic-view.png ) - 100% 宽度的标题，第一个 Pane - 左 - 高度 - 全屏(标题除外，ofc)，第二个 Pane - 右上- 屏幕高度的 50%(标题除外)，右下角 - 屏幕高度的 50%。 Pane 应该有固定的高度——如果内容有很大的高度，滚动条应该出现。 现在我有这样的东西:

#header {
    height:30px;  
}

#left {
    position: absolute;
    left: 0;
    width: 50%;   
}

#right-top {
    position: absolute;
    right: 0;
    width: 50%;
    height:50%;
    overflow: auto;
}

#right-bottom {
    position: absolute;
    right: 0;
    width: 50%;
    bottom: 1px;
    height:50%;   
}

http://jsfiddle.net/MCC5E/

目前存在的问题:左 Pane 不是全高，右上 Pane 与右下 Pane 重叠(可以在Firebug中检查)。

有没有办法实现这样的布局？

Answer 1

像这样的东西 http://jsfiddle.net/Znarkus/cwyuv/ ？我在 #pane 上设置了 pos: abs 以使 div 相对于它位于内部位置。然后 top: 0; bottom: 0; 在 #left 上，所以它填满了高度。另外，不要忘记设置 body 的高度。