具有自动高度的水平手风琴上的文本

Question

当我关闭手风琴时，其中的文本在手风琴关闭时移动到底部并且高度增加。

看这里http://jsfiddle.net/D2HJZ/1/

手风琴 HTML：

<div id="accordion1">
    <dl>
        <dt>
            <h1>Heading 1</h1>
            <div class="accordionSlider">
                <span>text etc...</span>
            </div>
        </dt>
    </dl>
</div>

我在awsAccordion插件中将高度改为自动：

//Set attrs for each li and div inside Horizontal       
for (i = 0; i < $(headLis).parent().find('dt').length; i++) {
    $(headLis).parent().find('dt').eq(i).css({
            'width': settings.cssAttrsHor.liWidth + 'px',
            'min-height':'100px',
            'height': 'auto'
        }).find('div.accordionSlider:first').css({
            'left': settings.cssAttrsHor.liWidth + 'px',
            'width': methods.calcDivWidthHor() + 'px',
            'min-height':'100px',
            'height': 'auto'
        });
    }
}

我不知道如何解决这个问题，请问有什么解决办法吗？
任何帮助表示赞赏， 谢谢。

Answer 1

使用Max-height 或固定height 和overflow:hidden; ：

 for (i = 0; i < $(headLis).parent().find('dt').length; i++) {

              $(headLis).parent().find('dt').eq(i).css({
                'width': settings.cssAttrsHor.liWidth + 'px',
                'min-height':'100px',

                'max-height':'100px',

                'overflow':'hidden',
                'height': settings.cssAttrsHor.liHeight 

              }).find('div.accordionSlider:first').css({
                'left': settings.cssAttrsHor.liWidth + 'px',
                'width': methods.calcDivWidthHor() + 'px',
                'min-height':'100px',
                'height': settings.cssAttrsHor.liHeight 
              });

            }