ट्विटर बूटस्ट्रैप अकॉर्डियन पूरी ऊंचाई शीशे

Question

मैं अपने आप को twitter bootstrap accordion साथ इस लक्ष्य को हासिल करने के लिए परेशान कर दिया गया है:

आम तौर पर, अकॉर्डियन (बूटस्ट्रैप पतन प्लगइन) का उपयोग नहीं कर बहुत जरूरी है।

क्या मैं हासिल करना चाहते हैं के लिए है: आधार ढांचे के रूप में

• उपयोग बूटस्ट्रैप,
• फिक्स्ड-टॉप नेवबार है,
• डब्ल्यू/स्क्रॉलबार ओ,
पूर्ण चौड़ाई/ऊंचाई सामग्री है
• में 3 अलग, ढहने योग्य सामग्री पैन (हमेशा केवल एक का विस्तार किया जा रहा है),
• सिर पर क्लिक कर रहा है एर हिस्सा सामग्री फलक का विस्तार (और पहले से एक का विस्तार गिर),
• स्क्रॉलिंग होते हैं केवल में एक विस्तार सामग्री फलक (DIV 1 | 2 | पिक में 3),
• जब सामग्री शीशे ढह कर रहे हैं, उनके अतिप्रवाह छिपा हुआ है,
• प्रत्येक सामग्री फलक (अपने "शीर्षक" के लिए) अपने विन्यास मिनट ऊंचाई है है,
• इस ठीक से उत्तरदायी लेआउट के लिए काम कर रहा है।

वास्तव में इस पर कुछ मदद पाने के लिए के रूप में मुझे लगता है कि इस पर :(

अतिरिक्त jQuery प्लगइन्स (jQuery यूआई की तरह) का उपयोग करते हैं "की अनुमति" है मैं अपने मन खो रहा हूँ प्यार करोगे।

Answer 1

HTML:

<div class="ui-accordion" id="accordion">   
    <h4 class="ui-accordion-header">DIV1</h4> 
    <div class="ui-accordion-content" id="accordion-div1"></div> 
    <h4 class="ui-accordion-header">DIV2</h4> 
    <div class="ui-accordion-content" id="accordion-div2"></div> 
    <h4 class="ui-accordion-header">DIV3</h4> 
    <div class="ui-accordion-content" id="accordion-div3"></div> 
</div> 

सीएसएस: (कुछ खास नहीं)

जे एस:

$("#accordion").accordion({ 
    heightStyle : "fill" 
}); 

Answer 2

मैं कुछ जे एस के साथ इस लक्ष्य को हासिल करने में सक्षम था:।

var tabsHeight = $('.accordion-heading').outerHeight() * $('.accordion-heading').length; 
var height = $('#your_accordion_container').innerHeight() - tabsHeight; 

$('.accordion-inner').height(height - 1); 

मैं पता लगा नहीं किया है कारण है कि मैं - 1 अभी तक है, लेकिन इसके बिना .accordion-inner बहुत बड़ा था की जरूरत है

0,123,

इसे किसी फ़ंक्शन में लपेटना सुनिश्चित करें और ब्राउजर विंडो का आकार बदलने पर हर बार कॉल करें। यह भी सुनिश्चित करें कि आपके .accordion-inner में कोई ऊर्ध्वाधर पैडिंग नहीं है या सेट ऊंचाई से उस पैडिंग को निकालने के लिए नहीं है।

Answer 3

कोई भी इस के लिए एक बूटस्ट्रैप 3 समाधान है?

संपादित करें (यह काम करने के लिए प्रकट होता है): https://github.com/twbs/bootstrap/issues/2462

$('#accordion').collapse().height('auto');