Question

我已经关注了Ryan Fait的粘性页脚example，出于某种原因，当你减小浏览器的高度时，我的页脚会粘住其他div。任何人都知道为什么会这样，我显然错过了一些东西，我之前没有遇到过这个问题。

Answer 1

你需要清除浮子。只需将clear:both添加到.push课程即可。此外，您应该删除包装上的上边距和填充，因为它会强制高度超过100％并创建不必要的滚动。

Answer 2

#wrapper{
    position:relative;
    height:auto;
    min-height:100%;
}
#footer{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
}

Answer 3

我发现CSS粘性页脚方法看似简单，真是一场噩梦。 @Yusef上面的解决方案要简单得多。我对此做了一个变体，它也实现了这个Javascript代码：

function setFooter()
{
    var footer = document.getElementById("footer");

    var innerWidth = window.innerWidth;
    var offsetWidth = document.body.offsetWidth;

    var scroll = innerWidth - offsetWidth;

    if(scroll != 0)
    {
        footer.style.position = "relative";
    }
    else
    {
        footer.style.bottom = 25 + "px";
    }
}

只要Yusef的页脚CSS也包含clear: both;，当窗口中有否滚动条时，页脚div将自动对齐主内容div（并设置） html body标签中的onload = "setFooter();"。

如果窗口中有滚动条，则滚动变量计算的差值将是溢出的整数量（有关详细信息，请参阅我的问题：Why are scrollTop, pageYOffset, and height all not working?）。

观看这些视频以实现包装器，主要内容和页脚div：http://www.youtube.com/watch?v=JnhoQ-aLfvE&src_vid=UpZbLIfHSMw&annotation_id=annotation_777473&feature=iv

粘性页脚不能正常工作

3 个答案: