jquery-ui - jQueryタブパネルのサイズ設定

Question

）。

私はjQueryタブを使用していますが、タブが左に配置され、上部のオレンジ色の部分が割り当てられた幅の100％を占める方法が気に入っています。しかし、タブをクリックすると、ドロップダウンパネルにはページの半分に十分な情報しかありません。

すべてのパネルがページの半分だけを占めるようにパネルサイズを調整するにはどうすればよいですか？

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