0

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

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

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

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

我overflow:hidden在中心窗格上设置，我试图 height: 100%在选项卡面板上设置它以使其尽可能地增长，但它正在占用下面的空间（即页脚 div 未显示）。

我能做些什么来修复布局？

4

2 回答 2

1

页脚在那里。问题只是你不能设置div#tabswith 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 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%--------|
|....|.....|.....|.................|
于 2015-04-02T13:23:44.873 回答
0

回答我自己的问题：事实上，contentSelectorjQuery 布局的选项起到了作用。

请参阅更新的小提琴：http: //jsfiddle.net/mguijarr/288yaz15/1/

于 2015-04-04T13:39:06.720 回答