jQuery選項卡：自動高度

Question

我正在使用jQuery選項卡作爲接口。我希望我的主要div（選項卡覆蓋）獲取頁面的尺寸。 目前，它正在爲疊加層工作，但標籤的長度是自動的，並且與內容允許的一樣小（沒有什麼不尋常的或意外的）。

所以簡而言之，我的問題是：我如何使標籤的尺寸恰到好處？
我試圖讓它們變大，但它們似乎強制覆蓋層變得更大，即使它們沒有達到頁面的底部。

編輯：代碼例如：

<div id="a-tab-panel" class="ui-tabs-hide"> </div> 
      <div id="tabs"> 
      <ul> 
        <li><a href="#tabs-1" class="tabStyle">Conférences</a></li> 
        <li><a href="#tabs-2" class="tabStyle">Annuaire</a></li> 
        <li><a href="#tabs-3" class="tabStyle">Statistiques</a></li> 
      </ul> 
       <div id="tabs-1"> 
       Content... 
      </div> 
      <div id="tabs-2" class="tabContentStyle"> 

       Content... 

      </div> 
      <div id="tabs-3" class="tabContentStyle"> 

       Content... 

      </div> 
    </div> 

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"> 
     <p>First tab is active by default:</p> 
     <pre><code>$('#example').tabs();</code></pre> 
    </div> 
    ... 
</div> 

然後我們設置所有選項卡的高度的高度最高的一個，在我的情況下是＃fragment-1。

$("#tabs div.ui-tabs-panel").css('height', $("#fragment-1").height()); 

方法2：

或者你可以使用EqualHeights jQuery插件來自動設置取決於內容的選項的高度。