Jquery UI选项卡具有相同的高度

Question

我想使用Jquery UI选项卡制作三个选项卡，这些选项卡都包含相同大小的内容区域。内容区域的大小似乎取决于内容。如何强制它以使所有三个选项卡具有相同大小的内容区域，以便我可以使用100％的高度作为内容，它们将只填充所有可用空间？

谢谢！

Answer 1

如果你有一个特定的高度，那么你可以在适当的.ui-tabs-panel上指定高度。给出这样的HTML：

<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>

然后你可以使所有面板200px高：

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

演示：http://jsfiddle.net/ambiguous/SQu6K/