jQuery UI Tabs: Set Tabs to full page size

Question

I thought this would be a simple project but it looks like it's a lot more complicated. Searched bo I'm trying to create jQuery UI tabs that take up the whole page. So the width and height of the tabs should be set to the size of the browser.

Can anyone suggest any examples or tutorial on doing this using jQuery UI tabs?

Answer 1

Using the http://jqueryui.com/demos/tabs/ tabs, there is a top-level <div> block enclosing the list that defines the tabs and a <div> for each tab, like:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
    </ul>
    <div id="tabs-1">Tab 1 Content HERE</div>
    <div id="tabs-2">Tab 2 Content HERE</div>
</div>

To set the size of the tab widget, add style (attribute or css) to the top <div>:

<div id="tabs" style="width:100%; height:100%">

Exactly what style you should apply will depend on your desired page layout.