如何在保持包装动态的同时制作粘性页脚？答案

【问题标题】：How to make a sticky footer, whilst keeping the wrapper dynamic?如何在保持包装动态的同时制作粘性页脚？
【发布时间】：2012-10-25 04:31:13
【问题描述】：

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

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

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

【问题讨论】：

cssstickyfooter.com/using-sticky-footer-code.html 不需要 JS。你的包装器就是一个包装器，它真的不需要任何样式，所以我很难理解你的问题。如果您有背景颜色或类似的东西，请将它们应用到包装器内的 div 并使用包装器来达到预期目的，以包含所有其他代码并允许您将其作为一个整体进行操作。

标签： javascript jquery css sticky-footer

【解决方案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>');

})

希望这有帮助！

【讨论】：

【解决方案2】：

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

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

【讨论】：

要求你限制包装器的高度。
是的 - 你是对的，我似乎错过了那部分。