调整 jQuery 选项卡面板的大小

【问题标题】：Sizing jQuery Tabs panels调整 jQuery 选项卡面板的大小
【发布时间】：2012-07-11 22:12:28
【问题描述】：

)

我正在使用 jQuery 选项卡，我喜欢选项卡向左对齐的方式，顶部橙色部分占分配宽度的 100%。但是当我点击选项卡时，下拉面板只有一半页面的信息。

如何调整面板大小，使所有面板只占页面的一半？

【问题讨论】：

【解决方案1】：

您可以简单地将类样式添加到每个可显示的选项卡内容并限制其高度。

<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" class="tabview">
        Tab1 content
    </div>
    <div id="fragment-2" class="tabview">
        Tab2 content
    </div>
    <div id="fragment-3" class="tabview">
        Tab3 content
    </div>
</div>

以及必要时还显示滚动条的 CSS 样式：

.tabview {
    height: 50px;
    overflow: auto;
}

这里正在运行 JSFiddle：http://jsfiddle.net/Fhhu5/

【讨论】：