jQuery टैब कैसे बनाएं() 100% उच्च और सामग्री स्क्रॉल करने योग्य

Question

मैं टैब के साथ एक जेएस वेब ऐप बनाने की कोशिश कर रहा हूं। इंटरफ़ेस की विशेषता यह है कि टैब जितना ऊंचा हो उतना ऊंचा होना चाहिए और खिड़की से अधिक होने पर सामग्री को स्क्रॉल किया जाना चाहिए। सामग्री स्क्रीन को भरने वाले कई बाएं फ्लोट किए गए पैनलों से बनाई गई है।

मेरे पास पहले से ही समाधान का हिस्सा है, लेकिन मैं यह नहीं समझ सकता कि 100% ऊंचाई और कंटेनर के लिए स्क्रॉलिंग कैसे सेट करें।

http://jsfiddle.net/KhwZS/1242/

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

Answer 1

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

सीएसएस:

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

}

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

Answer 2

DEMO देखें।

सीएसएस position:fixed का उपयोग कर यूआई टैब को निश्चित रखें।

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

तो jQuery का उपयोग सामग्री एक margin-top देने के लिए इतना है कि वे डिफ़ॉल्ट रूप से यूआई पट्टियों के ठीक नीचे दिखाया जाएगा।

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

Answer 3

शायद आपने इसे पहले ही हल कर लिया है, लेकिन यहां स्थिति के साथ एक समाधान है: पूर्ण, यह हमारे लिए काम करता है। आपके लिए एक शुरुआती बिंदु हो सकता है। /कर्मचारी

.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; 
}