heightStyle：“填充”不适用于 Jquery 中的手风琴答案

【问题标题】：heightStyle: "fill" is not working for accordion in JqueryheightStyle：“填充”不适用于 Jquery 中的手风琴
【发布时间】：2012-11-26 14:45:06
【问题描述】：

- 随着容器尺寸的变化，我可以自定义
#backlogEpic 中定义的宽度，即 526px，但高度不是
定制 .为了填充其容器分配的垂直空间，我已将 heightStyle 选项设置为“填充”，但仍然无法正常工作
出去。它的采用是使用“自动”的默认高度。如何自定义
我的身高。如果您在图像中看到，扩展面板将超出容器。

     html:-  
        <div id="backlogEpic" class="ui-widget-content">
        <div id="backlogAccordion">  
        <--- accordian code---->   
        </div> 
        </div>

    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"
      });    });

【问题讨论】：

标签： jquery css jquery-ui jquery-ui-accordion

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

外观表明存在尚未清除的浮动，导致包装容器显示为原来的样子。尝试在您的手风琴后添加一个“清晰”元素：

.clearer{
clear:both:
height:1px;
margin-bottom:-1px;
}

<div id="backlogEpic" class="ui-widget-content">
    <div id="backlogAccordion">  
    <--- accordian code---->   
    </div> 
    <div class='clearer'></div>
</div>

【讨论】：

【解决方案3】：

试试这个。在创建事件时：

计算手风琴头 --> c
计算内容高度：父母的高度 (#content) - (c * 手风琴高度)
设置内容（.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);
    }
});

【讨论】：