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

Question

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

Answer 1

你刚刚发现了web开发人员最常见的问题之一......有很多解决方案，一些是纯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。