手风琴扩展时JQueryUi手风琴重叠页脚

Question

当手风琴扩展时，我有一个JQueryUI手风琴在我的页脚下方。这是我的屏幕截图。

通常页脚会停留在页面的底部，但是当手风琴展开时，它们会在页脚线下方。

这是页脚代码

 <div id="divfooter">
        <div id="containerfooter">
            <div id="divfooter1" class="floatleft textleft">
                <h5 class="textwhite">Need Help ?</h5>
                <a href="http://support.somewhere.com/" target="_blank" class="textgrey">Browse the Knowledge Base</a>
                <br />
                <a href="http://users.com/downloads/Support/QuickSupport.exe" target="_blank" class="textgrey">Remote Support</a>
            </div>
            <div id="divfooter2" class="floatleft textleft">
                <h5 class="textwhite">Phone COUNTRY COUNTRY PHONE</h5>
                <a href="mailto:Please help me with the following problem:" class="textgrey">Email Support</a>
                <br />
                <a href="../Home/Contact" class="textgrey">Contact</a>
            </div>
            <div id="divfooter3" class="floatleft textleft">
                <h5 class="textwhite">Licensing and Terms</h5>
                <a href="../Home/SubscriptionDetails" class="textgrey">Your Subscription details</a>
                <br />
                <a href="../Home/Terms" class="textgrey">Terms and Conditions</a>
            </div>
            <div id="divfooter4" class="floatleft textcenter textwhite">
                <h6>Copyright © 1998 -
                <script type="text/javascript">var d = new Date(); document.write(d.getFullYear()); </script>
                    . 
                    All Rights Reserved.</h6>
            </div>
        </div>
    </div>    

和CSS

#divfooter
{
position:absolute;
bottom:0;
width:1080px;
height:120px;   /* Height of the footer */
background:#191814;
/*left:-0px;*/
}
#containerfooter
{
width: 1080px;
 margin: 0px auto;
padding: 10px;
}

以下是手风琴的脚本

<script type="text/javascript">
$(function () {
    $("#accordion,#accordion1, #accordion2, #accordion3 ").accordion({ collapsible: true, active: 0 });//active 0 makes the first div default to open


    // Hover states on the static widgets
    $("#dialog-link, #icons li").hover(
        function () {
            $(this).addClass("ui-state-hover");
        },
        function () {
            $(this).removeClass("ui-state-hover");
        }
    );
});
$(function () {
$("#subAccordion").accordion({ collapsible: true, active: false }); 


// Hover states on the static widgets
$("#dialog-link, #icons li").hover(
        function () {
            $(this).addClass("ui-state-hover");
        },
        function () {
            $(this).removeClass("ui-state-hover");
        }
    );
});
</script>

我的手风琴是4支手风琴，最后一支手风琴。在其他页面中，页脚很好。如果内容多于屏幕高度，页面将简单地向下推页脚。如何在带有手风琴的页面上进行此操作？