jQuery UI布局和jQuery UI選項卡出現問題

Question

我正在嘗試創建一個結構如下的布局：

• 北窗格
• 中央窗格
  • 標頭div
  • 類似於筆記本的標簽面板
    • 至少有一個標簽
  • 頁腳div

標頭div和頁腳div必須始終可見，選項卡應占用所有剩余空間，並在需要時具有垂直滾動條。

這是我所做的： https : //jsfiddle.net/mguijarr/y57v3nkf/

我在中央窗格中設置了“ overflow:hidden ”，嘗試設置height: 100%在選項卡面板上設置height: 100% ，以使其盡可能多地增長，但是它正在占用下面的空間（即，未顯示頁腳div）。

我該如何解決布局問題？

Answer 1

頁腳在那里。 問題是您不能將div#tabs設置為height：100％，因為外部div已overflow:hidden

它具有與其容器相同的高度，但是由於頁腳與div#tabs處於同一級別，因此它將被隱藏，因為div.ui-layout-center的overflow:hidden 。

第一個解決方案：將div#tabs的高度更改為較低的百分比：

   <div style="margin-bottom: 10px; height: 100px; background: #ffff00;"></div>
   <div id="tabs" style="height: 40%; overflow: auto">
        content
   </div>
   <div style="background: #ff0000; height: 100px; ">footer</div>

https://jsfiddle.net/y57v3nkf/1/

第二種解決方案，將外部div的溢出選項更改為自動： https : //jsfiddle.net/y57v3nkf/2/

第三種解決方案（jQuery蠻力）：將外部div設置為100％的高度，然后：

$(document).ready(function(){
   var outerDivHeight = $('div.ui-layout-center').height();
   var tabDivHeight = outerDivHeight - 100 - 100 -10;

   $('#tabs').height(tabDivHeight);
});

https://jsfiddle.net/y57v3nkf/3/

此解決方案存在問題：

• 您必須進行計算。
• 加載頁面時，它會獲得正確的高度，但是如果調整頁面大小，則不會。

提示：按百分比進行：當您將固定尺寸的div和百分比div一起使用時，這些布局會變得非常棘手。 要完全響應，您必須按百分比重做所有布局思考，例如：

|-------------100%-----------------|
|---20%----|------------80%--------|
|....|.....|.....|.................|

Answer 2

回答我自己的問題：實際上，jQuery布局的contentSelector選項可以解決問題。

請參閱更新的提琴： http : //jsfiddle.net/mguijarr/288yaz15/1/