3个窗格布局(不是3列)

Question

我希望有布​​局,类似于Thunderbird经典视图的结构(http://kmgerich.com/pinstripe/screenshots/mail/classic-view.png) - 标题宽度为100%,第一个窗格 - 左侧 - 高度 -全屏(除了标题,ofc),第二个窗格 - 右上 - 屏幕高度的50%(标题除外),右下角 - 屏幕高度的50%.窗格应该具有固定的高度 - 如果内容具有较大的高度,则应显示滚动条.现在我像这样:

#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/

当前问题:左窗格不是全高,右窗格重叠右下窗格(可以在Firebug中查看).

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

Answer 1

这样的东西http://jsfiddle.net/Znarkus/cwyuv/？我设置pos: abs上#pane做的相对位置内的div它.然后top: 0; bottom: 0;就#left这样填满了高度.另外,不要忘记设置高度body.