title: JQueryUi accordion overlapping page footer when accordion is expanded
body: <p>I have a JQueryUI accordion that is going below my footer when the accordion is expanded. Here is my screen shot.
  <img src="https://i.stack.imgur.com/Yrvx1.png" alt="Footer issue"></p>
  
  <p>Normally the footer stays at the bottom of the page but when the accordions are expanded they go below the footer line.</p>
  
  <p>Here is the footer code</p>
  
  <pre><code> &lt;div id="divfooter"&gt;
          &lt;div id="containerfooter"&gt;
              &lt;div id="divfooter1" class="floatleft textleft"&gt;
                  &lt;h5 class="textwhite"&gt;Need Help ?&lt;/h5&gt;
                  &lt;a href="http://support.somewhere.com/" target="_blank" class="textgrey"&gt;Browse the Knowledge Base&lt;/a&gt;
                  &lt;br /&gt;
                  &lt;a href="http://users.com/downloads/Support/QuickSupport.exe" target="_blank" class="textgrey"&gt;Remote Support&lt;/a&gt;
              &lt;/div&gt;
              &lt;div id="divfooter2" class="floatleft textleft"&gt;
                  &lt;h5 class="textwhite"&gt;Phone COUNTRY COUNTRY PHONE&lt;/h5&gt;
                  &lt;a href="mailto:Please help me with the following problem:" class="textgrey"&gt;Email Support&lt;/a&gt;
                  &lt;br /&gt;
                  &lt;a href="../Home/Contact" class="textgrey"&gt;Contact&lt;/a&gt;
              &lt;/div&gt;
              &lt;div id="divfooter3" class="floatleft textleft"&gt;
                  &lt;h5 class="textwhite"&gt;Licensing and Terms&lt;/h5&gt;
                  &lt;a href="../Home/SubscriptionDetails" class="textgrey"&gt;Your Subscription details&lt;/a&gt;
                  &lt;br /&gt;
                  &lt;a href="../Home/Terms" class="textgrey"&gt;Terms and Conditions&lt;/a&gt;
              &lt;/div&gt;
              &lt;div id="divfooter4" class="floatleft textcenter textwhite"&gt;
                  &lt;h6&gt;Copyright © 1998 -
                  &lt;script type="text/javascript"&gt;var d = new Date(); document.write(d.getFullYear()); &lt;/script&gt;
                      . 
                      All Rights Reserved.&lt;/h6&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;    
  </code></pre>
  
  <p>And the CSS</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>Here is the scripts for the accordion</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(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");
          }
      );
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>My accordions are 4 accordions with the last having a sub-accordion. In other pages the footer is fine.  The page will simply push the footer down if there is more content than screen height. How can I get it to do this on the page with the accordions?</p>