我无法将页脚扩展到浏览器窗口的底部

Question

所以我无法在此页面上获取页脚：http://hiddenhillsweddings.com/扩展到浏览器窗口的底部。我已经尝试了所有不同的位置属性（绝对，相对等等）。我尝试了各种不同的组合，最小和最大高度为100％和其他值。我在这个论坛上阅读了很多关于这个主题的帖子，但还没有找到解决方案。我很确定我需要的是一个位置：绝对的;并且高度为100％但是由于某些原因，当我这样做时，页脚延伸到浏览器的底部并且我无法隐藏溢出以摆脱滚动条。有人请帮助我。

Answer 1

您刚刚找到了一位网络开发者＆＃39;最常见的问题......有很多解决方案，一些是纯CSS，另一些是JavaScript。已经写了一些关于这个主题的好教程：

• http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
• http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/

我个人通过jQuery来做，我发现它更可靠。我将页脚放在所有内容下方，显示：块和正常位置。然后我检查内容是否小于页面，在这种情况下我将位置更改为绝对和底部：0;

完成后，我会检查窗口调整大小以防场景发生变化。它可能不是最佳的，但效果很好：

function footer(){
    var offset = $('#footer').offset();
    var footerHeight = $('#footer').height();
    var height = window.innerHeight;
    if(height-offset.top-footerHeight>0)
        $('#footer').css({'position':'absolute', 'bottom':0, 'width':'100%'});
    else
        $('#footer').css({'position':'static'});
}

请确保更改#footer作为页脚元素的ID。