1

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

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

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

4

2 回答 2

0

这是一个简洁的 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>');

})

​</p>

希望这有帮助！

于 2012-10-24T20:22:53.553 回答
0

通过保持包装器动态-我认为您的意思是页面/主要内容的包装器，而不是页脚？页脚高度是动态的还是整个页面的高度？

如果页脚是固定高度但主要内容包装可以变化，这是一个很好的资源： http ://ryanfait.com/resources/footer-stick-to-bottom-of-page/

于 2012-10-24T20:31:13.317 回答