Question

I’m using jQuery tabs for an interface. I’d like my main div (the tab overlay) to take the pages’ dimensions.
For the moment, it is working for the overlay, but the tabs’ length is automatic, and is as small as the content allows it (nothing unusual or unexpected).

So in a nutshell, my question is : how do I make the tabs take exactly the right dimensions?
I’ve tried making them larger but they seems to force the overlay to get bigger, even though they do not reach the bottom of the page.

Edit : code example :

   <div id="a-tab-panel" class="ui-tabs-hide"> </div>
            <div id="tabs">
            <ul>
                    <li><a href="#tabs-1" class="tabStyle">Conférences</a></li>
                    <li><a href="#tabs-2" class="tabStyle">Annuaire</a></li>
                    <li><a href="#tabs-3" class="tabStyle">Statistiques</a></li>
            </ul>
                <div id="tabs-1">
                Content...
            </div>
            <div id="tabs-2" class="tabContentStyle">

                Content...

            </div>
            <div id="tabs-3" class="tabContentStyle">

                Content...

            </div>
    </div>

Answer 1

Assuming your tabs are arranged horizontally:

Updated Example:

<div id="tabs">
   <ul>
       <li><a href="#fragment-1"><span>One</span></a></li>
       <li><a href="#fragment-2"><span>Two</span></a></li>
       <li><a href="#fragment-3"><span>Three</span></a></li>
   </ul>
   <div id="fragment-1">
       <p>First tab is active by default:</p>
       <pre><code>$('#example').tabs();</code></pre>
   </div>
   ...
</div>

Then we set the height of all tabs to the height of the highest one, which is #fragment-1 in my case.

$("#tabs div.ui-tabs-panel").css('height', $("#fragment-1").height());

Method #2:

Or you could use EqualHeights jQuery Plugin to automatically set the height of the tabs depending on the content.