heightStyle：“填充”在Jquery中不适用于手风琴

– 随着容器尺寸的变化，我可以自定义
在#backlogEpic中定义的宽度，即526px，但高度不是
定制。 为了填充由其容器分配的垂直空间，我已将heightStyle选项设置为“fill”但仍然不起作用
出。 使用’auto’获取默认高度。 我该如何定制
我的身高。如果你看到图像，扩展的面板就会从容器中走出来。

html:- 
 
  
 
 css :- #backlogEpic{ padding: 10px; height: 200px; width: 526px; right: 25px; } javascript:- $(function() { $( "#backlogEpic" ).resizable({ minHeight:140, minWidth: 150, resize: function() { $( "#backlogAccordion" ).accordion( "refresh" ); } }); $( "#backlogAccordion" ).accordion({ heightStyle: "fill" }); }); 

Answer 1

我一直在和你打同样的问题。 我的网站使用的是jQuery 1.9.1和jQueryUI 1.10.2。 我所有的努力都是在父母的div上，但文档或讨论都没有奏效。 昨天我发现了SO主题jquery 1.9手风琴高度问题 ，其中Mottie建议修改每个手风琴面板而不是父母的CSS：

 #accordion .ui-accordion-content { max-height: 400px; overflow-y: auto; } 

在我昨天做的有限测试中，这解决了手风琴溢出容器的问题。

Answer 2

外观表明有一个尚未清除的浮动，导致包装容器出现。 尝试在手风琴后添加“清晰”元素：

 .clearer{ clear:both: height:1px; margin-bottom:-1px; } 
 
 <--- accordian code----> 
 
  

Answer 3

试试这个。 在创建活动时：

1. 计算手风琴标题 – > c
2. 计算内容高度：父母的身高（#content） – （c * acordion height）
3. 设置内容（.ui-accordion-content）外部高度;

你应该知道高度与内部高度对比jquery的外部高度

 $( "#accordion" ).accordion({ heightStyle: "fill", collapsible:true, active:false, animate:300, create: function( event, ui ) { var c=$(".ui-accordion-header").length; var h=$("#content").height() - (c* $(".ui-accordion-header").outerHeight(true)); $(".ui-accordion-content").outerHeight(h); } });