3个窗格布局（不是3列）

我想要有与Thunderbird经典视图（http://kmgerich.com/pinstripe/screenshots/mail/classic-view.png）结构类似的布局 - 宽度为100％的页眉，第1个窗格 - 左侧高度 - 全屏（除了标题，ofc），第二个窗格 - 右上角 - 屏幕高度的50％（除了标题），右下角 - 屏幕高度的50％。窗格应该有固定的高度 - 如果内容的高度很大，应该出现滚动条。现在我有水木清华这样的：3个窗格布局（不是3列）

#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的检查）。

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

来源

2011-11-21 Distdev

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

来源

2011-11-21 13:58:37 Znarkus

的containerHeight和containerWidth值偏移的高度和宽度这是Znarkus在每个'＃pane'和'body'上设置'overflows'的小提琴的修改版本。 http://jsfiddle.net/dylanvalade/kKYmf/ –

感谢您的帮助和详细的解释:) – Distdev

如果您想要比百分比更精确，请使用jQuery根据正文或外部容器的outerHeight和outerWidth设置元素的大小。 http://api.jquery.com/outerWidth/

该函数可以根据需要经常调用并扩展到右列元素。如果窗格的尺寸被用户更改或浏览器窗口大小发生变化，则再次调用resize函数。如果您发现有一点点重叠或你想保持你的窗格之间一定的余量，只需将它添加通过减少东西像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}); 

};

来源

2011-11-21 14:30:19

3个窗格布局（不是3列）

回答

相关问题