Question

在我的布局中，我创建了以下jsfiddle托管的可调整大小的粘性页脚。但是，在调整大小时，它与内容重叠。反正有没有在所有浏览器上做出响应？

$(function () {

    $('.footer').resizable({
     handles: 'n, s'
    }).bind('resize', function(){
      $(this).css("top", "auto");
    });

});


<div class="footer">
   <p> footer content here </p>
</div>

CSS：

.footer {
  color: #ffffff;
  position: fixed !important;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  z-index: 1000;
  height: 60px;
  background-color: #333333;
}

Answer 1

通过添加以下功能

，我能够在研究中进行更多研究以解决它

var bumpIt = function() {
      $('body').css('margin-bottom', $('.footer').height());
    },
    didResize = false;

bumpIt();

$(window).resize(function() {
  didResize = true;
});
setInterval(function() {
  if(didResize) {
    didResize = false;
    bumpIt();
  }
}, 250);

http://jsfiddle.net/v71tsx97/

也可以这样做：http://jsfiddle.net/mnuxohoj/

但欢迎任何其他具有更好性能的方法。

Answer 2

是否需要重新调整大小？试过禁用方法，但由于某种原因它不起作用。得到它停在它上面的内容但是。这有什么好处吗？ JS FIDDLE

$(function () {
 var topheight = $('#top').height();
 var topoffset = $("#top").offset();     
 var topbottom = topoffset.top + topheight;

$('.footer').resizable({
 handles: 'n, s'
}).bind('resize', function(){
   $(this).css("top","auto");


      var footeroffset = $(this).offset();
      var footerheight = $(this).height();
      var footerBottom= footeroffset.top + footerheight;

     $("#res").html(topbottom+"  "+footeroffset.top);
    if(topbottom + 50 >= footeroffset.top){
        $('#res').html("should disable");        
        $('.footer').resizable("destroy");
    }

});

});

可调整大小的粘性页脚重叠内容 - 修复

2 个答案: