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>');

})

希望这有帮助！

Answer 2

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

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

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

2 个答案: