Twitter Bootstrap accordion panes đầy đủ chiều cao

Question

Tôi đã gây phiền hà bản thân mình để đạt được điều này với twitter bootstrap accordion:

Nói chung, sử dụng accordion (bootstraps sụp đổ plugin) không phải là một.

Những gì tôi muốn đạt được là:

• bootstrap sử dụng như khuôn khổ cơ bản,
• có cố định-top navbar,
• có đầy đủ nội dung chiều rộng/chiều cao w/o thanh cuộn,
• có 3 ngăn xếp nội dung riêng biệt, có thể thu gọn (chỉ có một ô mở rộng),
• đã nhấp vào đầu er phần mở rộng cửa sổ nội dung (và sụp đổ mở rộng trước một),
• đã di chuyển xảy ra chỉ trong một mở rộng nội dung cửa sổ (DIV 1 | 2 | 3 trong pic),
• khi panes nội dung đang sụp đổ, có tràn của họ ẩn,
• có mỗi cửa sổ nội dung có cấu hình min-height của nó (cho "tiêu đề" của nó),
• có điều này đúng cách làm việc cho bố trí đáp ứng.

thực sự rất thích có được một số giúp đỡ về vấn đề này như tôi nghĩ rằng tôi mất tâm trí của tôi trên này :(

Việc sử dụng các plugin jQuery bổ sung (như jQuery UI) là "cho phép".

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> 

CSS: (không có gì đặc biệt)

JS:

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

Answer 2

tôi đã có thể đạt được điều này với một số JS:.

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

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

tôi đã không tìm ra lý do tại sao tôi cần phải làm - 1 được nêu ra nhưng mà không có nó các .accordion-inner quá lớn

0.123.

Hãy chắc chắn để bọc này trong một chức năng và gọi nó mỗi khi cửa sổ trình duyệt được thay đổi kích cỡ. Ngoài ra hãy chắc chắn rằng .accordion-inner của bạn không có bất kỳ đệm dọc hoặc để loại bỏ đệm đó từ chiều cao đã đặt.

Answer 3

Bất cứ ai cũng có một giải pháp Bootstrap 3 cho điều này?

Chỉnh sửa (điều này dường như làm việc): https://github.com/twbs/bootstrap/issues/2462

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