[英]Trouble with jQuery UI layout and jQuery UI tabs
I am trying to create a layout structured like this: 我正在尝试创建一个结构如下的布局:
header div and footer div has to be always visible, the tab should take all remaining space and should have a vertical scroll bar if needed. 标头div和页脚div必须始终可见,选项卡应占用所有剩余空间,并在需要时具有垂直滚动条。
Here is what I did: https://jsfiddle.net/mguijarr/y57v3nkf/ 这是我所做的: https : //jsfiddle.net/mguijarr/y57v3nkf/
I set overflow:hidden
on the center pane, I tried to set height: 100%
on tab panel for it to grow as much as it can, but it's eating the space below (ie. the footer div is not shown). 我在中央窗格中设置了“
overflow:hidden
”,尝试设置height: 100%
在选项卡面板上设置height: 100%
,以使其尽可能多地增长,但是它正在占用下面的空间(即,未显示页脚div)。
What can I do to fix the layout ? 我该如何解决布局问题?
The footer is there. 页脚在那里。 The problem is just that you can't set the
div#tabs
with height: 100%, because the outer div has overflow:hidden
问题是您不能将
div#tabs
设置为height:100%,因为外部div已overflow:hidden
It will have the same height as its container, but as the footer is at the same level as the div#tabs
, it will be hidden, because the div.ui-layout-center
has the overflow:hidden
. 它具有与其容器相同的高度,但是由于页脚与
div#tabs
处于同一级别,因此它将被隐藏,因为div.ui-layout-center
的overflow:hidden
。
First solution: change the height of div#tabs
to a lower percentage: 第一个解决方案:将
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/ https://jsfiddle.net/y57v3nkf/1/
Second solution, change the overflow option of the outer div to automatic: https://jsfiddle.net/y57v3nkf/2/ 第二种解决方案,将外部div的溢出选项更改为自动: https : //jsfiddle.net/y57v3nkf/2/
Third Solution (Jquery Brute force): Set the outer div to 100% height, and: 第三种解决方案(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/ https://jsfiddle.net/y57v3nkf/3/
Porblems with this solution: 此解决方案存在问题:
TIP: Go percentual: These layouts get really tricky when you have fixed size divs along with percentual divs. 提示:按百分比进行:当您将固定尺寸的div和百分比div一起使用时,这些布局会变得非常棘手。 To go fully responsive, you'll have to redo all the layout thinking in percentages, example:
要完全响应,您必须按百分比重做所有布局思考,例如:
|-------------100%-----------------|
|---20%----|------------80%--------|
|....|.....|.....|.................|
Answering my own question: in fact, the contentSelector
option of jQuery layout did the trick. 回答我自己的问题:实际上,jQuery布局的
contentSelector
选项可以解决问题。
See updated fiddle: http://jsfiddle.net/mguijarr/288yaz15/1/ 请参阅更新的提琴: http : //jsfiddle.net/mguijarr/288yaz15/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.