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

Question

我想使用 Jquery UI Tabs 制作三个包含相同大小内容区域的选项卡。内容区域的大小似乎取决于内容。如何强制所有三个选项卡具有相同大小的内容区域，以便我可以为内容使用 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/