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

前端之家收集整理的这篇文章主要介绍了css – 具有相同高度的Jquery UI选项卡前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想使用 Jquery UI选项卡制作三个选项卡,这些选项卡都包含相同大小的内容区域.内容区域的大小似乎取决于内容.如何强制它以使所有三个选项卡具有相同大小的内容区域,以便我可以使用100%的高度作为内容,它们将只填充所有可用空间?

谢谢!

解决方法

如果您有特定的高度,那么您可以在相应的.ui-tabs-panels上指定该高度.给出这样的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/

猜你在找的CSS相关文章