Jquery手風琴高度：100％

Question

我期待創建一個手風琴風格的網站，其中有3個菜單項，可以在展開時填充100％的窗口。我可以找到很多不同的手風琴，但沒有一款適合身高：100％

任何想法？

這裏的總體佈局：

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

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

Answer 1

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

它會工作，如果你使用的是一些組合或部件的大小選擇後或增加所導致的任何行動手風琴的大小增加比處理那個事件你可以簡單地呼叫以下;

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

調整你的手風琴。

Answer 2

您可以使用jQuery UI手風琴做到這一點（demo）：

CSS

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

.accordion { 
    height: 100%; 
} 

腳本

$(function(){ 

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

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

}); 

---

對於jQuery UI的手風琴（v1.12.1 +）的較新版本中，設置heightStyle到fill，使用 「刷新」 更新和設置HTML &體高度爲100％（demo ）。

CSS

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

腳本

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

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

Answer 3

在某些版本heightStyle：「內容」不行的，因爲在jquery.ui.js文件不被「heightStyle」變量，所以你可以手動設置默認的變量jquery.ui。 js。

查找代碼：

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

更改爲：

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

Answer 4

我有同樣的問題和：

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

固定它，不需要更多的JavaScript。

Answer 5

我使用jquery-ui的1.8.21，而heightStyle：「content」對我不起作用。我通讀了代碼，發現了以下解決方案：

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