jQuery UI 布局和 jQuery UI 选项卡的问题

Question

我正在尝试创建一个结构如下的布局：

• 北窗格
• 中心窗格
  • 标题 div
  • 类似笔记本的标签面板
    • 至少有一个标签
  • 页脚 div

header div 和 footer div 必须始终可见， 标签应该占用所有剩余空间，并且应该有 如果需要，一个垂直滚动条。

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

我在中心窗格上设置了overflow:hidden，我尝试设置 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

回答我自己的问题：事实上，contentSelector 选项 jQuery 布局成功了。

查看更新的小提琴：http://jsfiddle.net/mguijarr/288yaz15/1/