可調整大小的粘性頁腳與內容重疊 - 修復

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

我挖更多的研究後，能夠通過添加以下功能

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

}); 

});