无法制作粘性页脚。我的代码中有一个巨大的错误吗？

Question

我正在尝试制作粘性页脚，如以下网站所示：http://rafilabs.com/test-footer.html

页脚位于页面底部，但如果您降低分辨率/使浏览器窗口变小以使页脚覆盖内容，则页脚将滑出屏幕。

我试图达到相同的效果但是当我降低分辨率/屏幕尺寸时，页脚仍然位于窗口的底部，覆盖了一些信息。

我尝试使用不同的技术解决这个问题，但我无法找到解决方案。我可能遇到的一个问题是我的部分往往不采用它包含的div的高度，因此这可能会导致页脚认为这些部分实际上是空的。

图片1： 图2：

我试过使用overflow：hidden;并且溢出：auto;，但它似乎不起作用，并且在它之上，它往往会破坏我现有的格式（最值得注意的是，旁边部分的右边界消失了。

我不确定发生了什么。我很困惑为什么东西没有按要求调整。

我已经提供了代码（和图片），因为我认为它不会在JSFiddle中很好地扩展（我仍然需要处理大量的水平扩展）。链接：https://mega.nz/#!kAQnjJAQ!aP-JdLkrV3vfMPnczoz3JiwmmOAPEpPPQxSOiV8HZC0

Answer 1

作为一名前端开发人员，我也一直在搜索如何让页脚变得粘稠。经过大量的尝试，我可以尝试一些可重复使用的代码：

/*
layout structure like this:
body 
    .page
        .site-content
        .site-footer
*/ 

html,body {
    margin:0; 
    padding:0; 
    height:100%;
}
.page {
    min-height:100%; 
    position:relative;
}
.main {
    padding:0px; 
    /* make sure footer height and main padding-bottom match */
    padding-bottom:40px;
}
.footer-block {
    position:absolute;
    bottom:0;
    width:100%; 
    left:0; 
    right:0; 
    /* make sure footer height and main padding-bottom match */
    height:40px;
}

在这种情况下，我主要使用div，但我不明白为什么部分不起作用。

Answer 2

从position:relative容器中删除#wrapper。绝对位于相对定位的父级内的任何子元素都将保留在父级的边界内。

如果没有position:relative的包装，则很可能是z-index问题。将z-index: 1000添加到其他div之上的div。如果他们有一个z-index集，那么请确保你想要的div＆＃34;在顶部＆＃34;有比其他人更高的z指数。