JQuery用戶界面選項卡填充可用垂直空間

的jsfiddle：http://jsfiddle.net/DQGMb/JQuery用戶界面選項卡填充可用垂直空間

我有，我想一路延伸到屏幕的底部，然後將標籤內滾動JQuery用戶界面選項卡。所以文檔不會滾動，只是選項卡。

要使面板滾動，我有該類的overflow-y:auto。爲了讓它填滿頁面，我試過height:100%和margin-bottom:0，但是沒有這樣做。任何指針？

HTML：

<p>I want the tab box to fill the rest of the available vertical space.</p> 
<p>height:150 is a placeholder.</p> 

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li><a href="#tabs-2">Proin dolor</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 
    </div> 
    <div id="tabs-2"> 
     <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> 
    </div> 
</div>

JS：

$(function() { 
    $("#tabs").tabs(); 
});

CSS：

.ui-tabs-panel { 
    height: 150px; 
    overflow-y: auto; 
}

來源

2012-04-23 Joe Frambach

您可以使用絕對定位...但這可能會變得sl depending取決於頁面上的其他內容。包含的元素也必須是100％。

html body { height: 100% } 

.ui-tabs { 
    position: absolute; 
    top: 100px; 
    bottom: 0px; 
} 

.ui-tabs-panel { 
    height: 100%; 
    overflow-y: auto; 
}

來源

2012-04-23 02:25:00 pilotcam

不錯。我搞砸了一些值使其工作。身高是90％。 #tabs左側，右側和底部設置爲0. .ui-tabs-panel height爲90％。看起來不錯。 – 2012-04-23 02:42:04

更改CSS來此：

.ui-tabs-panel { 
    height: auto; 
    overflow-y: auto; 
}

http://jsfiddle.net/DQGMb/6/

來源

2012-04-23 02:06:30 Marc

不這樣做。右側的滾動條位於包含元素上，不在面板中。我想包含元素不滾動。 – 2012-04-23 02:13:08

JQuery用戶界面選項卡填充可用垂直空間

回答

相關問題