页脚贴到底部

Question

I have bootstrap accordion in which all panels are collapsed except first one. The height of body is more than window height when the page first loads. The footer is stuck to the bottom of the page initially, and it remains at the bottom if I expand another panel from accordion. The problem is that, when all the panels are collapsed the body is of less height than the window height. In this scenario the footer is not sticking to the bottom of the window, It positions in the middle of the window where accordion ends.

I tried capturing the resize event, so if the body is of less height than the window then I would stick the footer to the bottom of the window else to bottom of the body, but resize doesn't work in case of accordion trigger.

Here is something I tried :

 $(window).resize(function(){
        footPosition();
     }); 


function footPosition()
 {var bodyHeight = $("body").height();
      var vwptHeight = $(window).height();
      if (vwptHeight > bodyHeight) {
        $("footer#pageFooter").css("position","absolute").css("bottom",0).css("width","100%");
      }else{
      $("footer#pageFooter").css("position","static").css("bottom",0).css("width","100%");
      }

}

Sorry I can't give you the accordion code, its too large.
But its a simple bootstrap accordion and I am stuck on this problem from last two days.

please help.

Answer 1

What you're looking for is CSS Sticky Footer

 <div id="footer">
    </div>

#footer {
  position: relative;
  bootom: 0;
  margin-top: -180px; /* negative value of footer height */
  height: 180px;
  clear:both;
}