相同高度的Jquery UI選項卡

我想使用Jquery UI選項卡製作三個選項卡，它們都包含相同大小的內容區域。內容區域的大小似乎取決於內容。我如何強制這樣做，因此所有三個標籤都具有相同大小的內容區域，以便我可以對內容使用100％的高度，並且它們將僅填充所有可用空間？相同高度的Jquery UI選項卡

謝謝！

來源

2011-12-05 w.donahue

應該怎樣確定的高度？你有一個特定的高度？你想讓它們和最高的一樣高嗎？ –

基本上我想要一個固定的高度的標籤+標籤內容的大小。這樣所有的內容區域都是相同的大小。我計劃在三個選項卡中分別放置一個滾動網格。 –

如果您有一個特定的高度，那麼您可以在相應的.ui-tabs-panel s上指定該高度。由於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>

然後，你可以讓所有的面板200像素高的搭配：

#tabs .ui-tabs-panel { 
    height: 200px; 
    overflow: auto; 
}

演示：http://jsfiddle.net/ambiguous/SQu6K/

來源

2011-12-05 02:10:57

非常感謝你讓我非常親近。我更新了提琴手http://jsfiddle.net/SQu6K/16/，在網格中添加了我想要在選項卡1中使用的技巧。使用您的技巧大多可以在鏈接中看到。但它使用非主題滾動條。我想在網格中使用滾動條，所以我嘗試將網格高度（表格）設置爲100％，但這並不符合我的預期。有沒有辦法使它與網格滾動工作？再一次感謝你的幫助。 –

@metalideath：您可能希望'＃tabs-1 {overflow：hidden！important}'，然後告訴網格小部件在該空間內滾動。我從來沒有使用過這個網格小部件，所以我不知道它如何處理滾動，對不起。 –

我最終得到它像我想要的滾動工作。 http://jsfiddle.net/SQu6K/20/感謝您的幫助。 –

相同高度的Jquery UI選項卡

回答

相關問題