Html 3窗格布局（非3列）

我想有布局，这在结构上类似于Thunderbird classic view（）-标题100%宽度，第一个窗格-左-高-全屏（标题除外，ofc），第二个窗格-右上-屏幕高度的50%（标题除外），右下-屏幕高度的50%。窗格应具有固定高度-如果内容高度较大，则应显示滚动条。 现在我有这样的smth：

#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%;   
}

当前的问题：左窗格不是全高，右上窗格与右下窗格重叠（可以在Firebug中检查）

---

有什么方法可以实现这样的布局吗？

类似的东西？我在

#窗格

上设置了

pos:abs

，使div处于相对于它的内部位置。然后

top:0；底部：0

位于

#左侧

，因此它填充了高度。另外，不要忘了设置

主体的高度

如果希望比百分比尺寸更精确，请使用jQuery根据主体或外部容器的外径和外径设置元素的大小

可以根据需要经常调用此函数，并为右列元素扩展此函数。如果用户更改了窗格的尺寸或更改了浏览器窗口的大小，则再次调用调整大小功能。如果您发现窗格之间有一点重叠，或者希望在窗格之间保持一定的边距，则可以通过将containerHeight和containerWidth值减少5或10来添加高度和宽度偏移

// Force sidebar to be the same height as page wrapper
function resizeSidebar() {

    // Capture outerHeight (height+padding+border+margin)
    var containerHeight = $('#pageWrapper').outerHeight(),
        containerWidth = $('#pageWrapper').outerWidth();

    // Percentage math
    var leftHeight = containerHeight - $('#header').outerHeight(),
        leftWidth = containerWidth / 2;

    // Set equal heights
    $('#left').animate({ height: leftHeight, width: leftWidth}, 250);
    // alternatively can set css property $('#left').css({'height' : leftHeight, 'width' : leftWidth});

};

---

这是Znarkus'fiddle的一个修改版本，它在每个

#窗格

和

主体

上设置了

溢出

。感谢您的帮助和详细解释：）