jQuery 手风琴高度：100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9045962/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery accordion height:100%
提问by Craig Jonathan Kristensen
I'm looking to create an accordion style website with 3 menu item that fill 100% of the window when expanded. I can find a lot of different accordions, but none that work properly with height: 100%
我希望创建一个手风琴风格的网站，其中包含 3 个菜单项，在展开时可以 100% 填充窗口。我可以找到很多不同的手风琴，但没有一个能在高度上正常工作：100%
Any ideas?
有任何想法吗？
Here is the general layout:
以下是总体布局：
回答by Imran Butt
jQuery( "#accordion" ).accordion({
collapsible: true,
heightStyle: "content"
});
It will work and if your are using some combo or widget whose size increases after selection or due to any action the size of the accordion increases than by handling that event you can simply call the following;
它会起作用，如果您使用的是某些组合或小部件，其大小在选择后增加或由于任何操作导致手风琴的大小增加，而不是通过处理该事件，您可以简单地调用以下内容；
jQuery( "#accordion" ).accordion( "resize" );
to adjust your accordion.
调整你的手风琴。
回答by Mottie
You can do this with jQuery UI Accordion (demo):
你可以用 jQuery UI Accordion ( demo)做到这一点：
css
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" )
});
});
For newer versions of jQuery UI Accordion (v1.12.1+), set the heightStyleto fill, use "refresh" to update andset the html & body height to 100% (demo).
对于较新版本的 jQuery UI Accordion (v1.12.1+)，将 设置heightStyle为 fill，使用“刷新”更新并将html 和主体高度设置为 100%（演示）。
CSS
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");
});
回答by Marek Kowalski
I use 1.8.21 of jquery-ui, and heightStyle: "content" didn't work for me. I read through the code and I found the following solution:
我使用 1.8.21 的 jquery-ui，heightStyle: "content" 对我不起作用。我通读了代码，发现了以下解决方案：
$('.accordion').accordion({
"autoHeight": false,
});
回答by Manvel
In some versions heightStyle: "content"is not working, because jquery.ui.jsis not include "heightStyle" variable, so you can set default variable manually in the jquery.ui.js.
在某些版本中heightStyle: "content"不起作用，因为 jquery.ui.js不包含 "heightStyle" 变量，因此您可以在jquery.ui.js 中手动设置默认变量。
Find in code:
在代码中查找：
$.extend( prototype.options, {
heightStyle: null, // remove default so we fall back to old values
...
.. some code ..
...
});
Change to:
改成：
$.extend( prototype.options, {
heightStyle: "content", // remove default so we fall back to old values
...
.. some code ..
...
});
回答by Labanino
I had the same issue and:
我有同样的问题，并且：
.collapse.in {
height: 100%!important;
}
fixed it, no need for more javascript.
修复了它，不需要更多的 javascript。
