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

Question

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

http://jsfiddle.net/9aLc0mg2/

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

是否需要重新调整大小？尝试了禁用方法，但由于某种原因它不起作用。让它停在上面的内容上。这有什么好处吗？ 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");
    }

});

});