页脚粘在底部

Question

我有 bootstrap 手风琴，其中除了第一个面板外，所有面板都折叠起来。页面首次加载时，body 的高度大于窗口高度。页脚最初粘在页面底部，如果我从手风琴展开另一个面板，它会保留在底部。 问题是，当所有面板折叠时，主体的高度小于窗口高度。在这种情况下，页脚不会粘在窗口的底部，它位于手风琴结束的窗口中间。

我尝试捕获调整大小事件，所以如果正文的高度小于窗口，那么我会将页脚粘贴到窗口的底部，否则我会将页脚粘贴到正文的底部，但是在手风琴的情况下调整大小不起作用触发。

这是我尝试过的：

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

}

对不起，我不能给你手风琴代码，它太大了。
但它是一个简单的引导手风琴，我从前两天就被这个问题困住了。

请帮忙。

Answer 1

你要找的是CSS Sticky Footer

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

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