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.
Here is what I did: 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).
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
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
.
First solution: change the height of div#tabs
to a lower percentage:
<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/
Second solution, change the overflow option of the outer div to automatic: https://jsfiddle.net/y57v3nkf/2/
Third Solution (Jquery Brute force): Set the outer div to 100% height, and:
$(document).ready(function(){
var outerDivHeight = $('div.ui-layout-center').height();
var tabDivHeight = outerDivHeight - 100 - 100 -10;
$('#tabs').height(tabDivHeight);
});
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. 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.
See updated fiddle: http://jsfiddle.net/mguijarr/288yaz15/1/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.