Jquery UI Tabs with same height

Question

I want to use Jquery UI Tabs to make three tabs that all contain the same sized content area. The size of the content area seems dependent on the content. How do I force it so all three tabs have the same sized content area so that I can use a height of 100% for the content and they will just fill all available space?

Thanks!

Answer 1

If you have a specific height in mind then you could just specify that height on the appropriate .ui-tabs-panels. Given HTML like this:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">One</a></li>
        <li><a href="#tabs-2">Two</a></li>
        <li><a href="#tabs-3">Three</a></li>
    </ul>
    <div id="tabs-1">
        <!-- ... -->
    </div>
    <div id="tabs-2">
        <!-- ... -->
    </div>
    <div id="tabs-3">
        <!-- ... -->
    </div>
</div>

Then you could make all the panels 200px tall with:

#tabs .ui-tabs-panel {
    height: 200px;
    overflow: auto;
}

Demo: http://jsfiddle.net/ambiguous/SQu6K/