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列）

回答

相關問題