Question

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

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

这是我尝试过的东西：

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

页脚贴到底部

1 个答案: