如何使jQuery選項卡（）100％高和內容可滾動

我想創建一個帶有選項卡的JS Web應用程序。界面的特點是選項卡應該和窗口一樣高，如果高於窗口，內容應該滾動。內容由填滿屏幕的幾個左浮動面板構成。如何使jQuery選項卡（）100％高和內容可滾動

我已經有解決方案的一部分工作，但我不知道如何設置100％的高度和容器的滾動。

<div class="tabs"> 
<ul> 
    <li><a href="#tab1">Tab1</a></li> 
</ul> 
<div id="tab1"> 
    <div class="container clearfix"> 
     <div class="floated"></div> 
     <div class="floated"></div> 
     <div class="floated"></div> 
    </div> 
</div>

jQuery tabs with scrolled content

來源

2013-03-21 allprog

http://jsfiddle.net/KhwZS/1245/

CSS：

html, body { 
    height: 100%; 
} 
.tabs { 
height: 100%;

}

#tab1 { 
    height: 100%; 
    overflow: auto; 
}

來源

2013-03-21 17:44:02

您可能需要'ul {position：fixed;}'來防止導航欄消失。 – gaynorvader 2013-03-21 17:50:09

還有一個問題：內容的底部以這種方式不可見。 100％高度佔用頁面的高度，但不考慮標籤欄高度！ – allprog 2013-03-22 15:22:21

請參閱DEMO。

通過使用CSS position:fixed來保持UI標籤的固定。

.ui-tabs-nav { 
    position: fixed; 
    width: 100%; 
}

然後使用jQuery給內容的margin-top這樣他們就被默認顯示在下面的UI選項卡。

$("#tab1").css("margin-top", $(".ui-tabs-nav").height());

來源

2013-03-21 18:20:31 Antony

謝謝。這一系列的作品，但內容落後於標籤欄，看起來很奇怪。此外，滾動條與標籤欄重疊。 – allprog 2013-03-22 15:23:32

也許你已經解決了這個問題，但是這裏有一個解決方案：absolute，這對我們很有用。可能是你的起點。 /Staffan

.tabs{ 
position: absolute; 
top: 0px; 
left: 0px; 
bottom: 0px; 
right: 0px; 
margin: 0px; 
} 


.ui-tabs .ui-tabs-nav { 
position: absolute; 
top: 0; 
left: 0px; 
height: 18px; 
right: 0; 
} 


.ui-tabs-panel { 
position: absolute; 
top: 18px; 
left: 0; 
bottom: 0; 
right: 0; 
overflow: auto; 
}

來源

2013-07-08 13:36:22 user574820

我已經解決了這個問題，但它有幾個選項絕對不錯。你能添加一個JSFiddler鏈接嗎？ – allprog 2013-07-08 13:38:06

此解決方案的jsfiddler鏈接：http://jsfiddle.net/LR7Et/ – 2013-12-24 22:02:53

如何使jQuery選項卡（）100％高和內容可滾動

回答

相關問題