jquery - 即使使用动态高度网站，如何将页脚保持在底部

Question

当我有一个使用 CSS 动态设置高度(例如，从数据库获取信息)的页面时，如何使页脚 div 始终位于窗口底部？

---

如果你想使用 jQuery，我想出了这个并且工作正常:

设置页脚的 CSS:

#footer { position:absolute; width:100%; height:100px; }

设置脚本:

<script>
  x = $('#div-that-increase-height').height()+20; // +20 gives space between div and footer
  y = $(window).height();    
  if (x+100<=y){ // 100 is the height of your footer
    $('#footer').css('top', y-100+'px');// again 100 is the height of your footer
    $('#footer').css('display', 'block');
  }else{
    $('#footer').css('top', x+'px');
    $('#footer').css('display', 'block');
  }
</script>

这个脚本必须在你的代码的末尾；

Answer 1

我认为这会解决你所有的问题:

    <script>

  $(document).ready(function() {

   var docHeight = $(window).height();
   var footerHeight = $('#footer').height();
   var footerTop = $('#footer').position().top + footerHeight;

   if (footerTop < docHeight) {
    $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
   }
  });
 </script>

您至少需要一个带有 #footer

的元素

如果内容适合屏幕，当不需要滚动条时，只需将 10 的值更改为 0如果内容不适合屏幕，将显示滚动条。