Question

我正在尝试创建一个这样的结构：

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

标题div和页脚div必须始终可见，选项卡应占用所有剩余空间并且应该具有如果需要，可以使用垂直滚动条。

以下是我的所作所为：https://jsfiddle.net/mguijarr/y57v3nkf/

我在中心窗格上设置overflow:hidden，我尝试设置选项卡面板上的height: 100%可以让它尽可能多地增长，但它正在吃下面的空间（即页脚div不是示出）。

我该怎么做才能修复布局？

Answer 1

页脚在那里。问题是您无法将div#tabs设置为高度：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 Brute force）：将外部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/

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

2 个答案: