javascript - 如何制作粘性页脚，同时保持包装动态？

Question

嗯，我压力很大。 - 重要时刻。

我在网上搜索了很长时间，寻找整洁的粘性页脚。好吧，猜猜看。我发现的每个粘性页脚都告诉您使用 min-height:100%。这很烦人，因为它使您的包装器变得丑陋，如果内容小于窗口本身，则会删除动态高度。

所以问题是如何制作粘性页脚，同时保持包装动态？

Answer 1

这是一个巧妙的 javascript 小技巧，可让您制作一个粘性页脚，当内容小于窗口时，它会停留在窗口底部。然后当内容高于窗口时，它会将页脚放在页面底部!

setInterval(function(){
    var wrapper_height = $('#wrapper').height();

var window_height = $(window).height();
    if(wrapper_height<window_height){
        $('footer').css({position:'absolute', bottom: '0px'});
    }else if(wrapper_height>window_height){
        alert('switched to mode 2');
         $('footer').css({position:'relative', bottom: '0px'});
    }
},10);



$('#wrapper').click(function(){

    $('#wrapper').append('<p>BLAH</p>');

}) 

希望这对您有所帮助!