Chiều cao Jquery accordion: 100%

Question

Tôi đang tìm cách tạo một trang web theo phong cách accordion với 3 mục menu lấp đầy 100% cửa sổ khi mở rộng. Tôi có thể tìm thấy nhiều sự phù hợp khác nhau, nhưng không có cách nào phù hợp với chiều cao: 100%

Bất kỳ ý tưởng nào?

Dưới đây là cách bố trí chung:

http://i.imgur.com/GLyTX.jpg

http://i.imgur.com/hOUrO.jpg

Answer 1

jQuery("#accordion").accordion({ 
    collapsible: true, 
    heightStyle: "content" 
}); 

Nó sẽ làm việc và nếu bạn đang sử dụng một số combo hoặc phụ tùng có kích thước tăng sau khi lựa chọn hoặc do bất kỳ hành động kích thước của accordion tăng hơn bằng cách xử lý sự kiện đó, bạn có thể chỉ cần gọi những điều sau đây;

jQuery("#accordion").accordion("resize"); 

để điều chỉnh accordion của bạn.

Answer 2

Bạn có thể làm điều này với jQuery UI Accordion (demo):

css

html, body { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    overflow: hidden; 
} 

.accordion { 
    height: 100%; 
} 

script

$(function(){ 

    $(".accordion").accordion({ fillSpace: true }); 

    $(window).resize(function(){ 
     // update accordion height 
     $(".accordion").accordion("resize") 
    }); 

}); 

---

Đối với các phiên bản mới hơn của jQuery UI Accordion (v1.12.1 +), thiết lập heightStyle để fill, sử dụng "làm mới" để cập nhật và thiết html & cơ thể cao đến 100% (demo).

CSS

html, 
body { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    overflow: hidden; 
} 

Script

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

$(window).resize(function() { 
    // update accordion height 
    $(".accordion").accordion("refresh"); 
}); 

Answer 3

Trong một số phiên bản heightStyle: "Nội dung" không hoạt động, bởi vì trong jquery.ui.js tập tin không được "heightStyle" biến, vì vậy bạn có thể tự thiết lập mặc định trong biến jquery.ui. js.

Tìm trong mã:

$.extend(prototype.options, { 
    heightStyle: null, // remove default so we fall back to old values 
    ... 
    .. some code .. 
    ... 
}); 

Thay đổi:

$.extend(prototype.options, { 
    heightStyle: "content", // remove default so we fall back to old values 
    ... 
    .. some code .. 
    ... 
}); 

Answer 4

tôi đã cùng một vấn đề và:

.collapse.in { 
    height: 100%!important; 
} 

cố định nó, không cần phải cho thêm javascript.

Answer 5

Tôi sử dụng 1.8.21 jquery-ui và heightStyle: "content" không hoạt động đối với tôi.Tôi đọc qua mã và tôi tìm thấy giải pháp sau:

$('.accordion').accordion({ 
     "autoHeight": false, 
    });