I am in the process of creating a responsive web design using jQuery tabs. My goal is to make one page of the website occupy the entire screen (100% height and width), have a fixed height for the div.ui-tabs-nav, and enable scrolling for the content of div.ui-tabs-panel if it extends beyond the current window size.
Here is the basic layout structure I am working with:
<div id="queue_tabs">
<ul>
<li><a href="queue_list.php?show=active">Active</a></li>
<li><a href="#tabs-completed">Completed</a></li>
</ul>
<div id="tabs-active">...</div> <!-- This section will be generated by jQuery automatically. -->
<div id="tabs-completed">...</div>
</div>
Please note that even though the content will be loaded through AJAX, I have omitted it from the accompanying jsFiddle.
In the CSS file, the following properties have been defined:
#queue_tabs {
height: 100%;
width: 100%;
}
#queue_tabs .ui-tabs-panel {
height: 90%; /* <--- This is the issue I am facing. */
overflow: auto;
}
As you can observe, to make the div.ui-tabs-panel expand, I had to specify a specific height value relative to the window height (90%), causing the div to adjust perfectly only under certain conditions.
Is there a method to cover the entire vertical space while still allowing overflow to be displayed?