html - 粘性页脚位于屏幕底部，而不是页面底部

因此，每次我制作网站时，页脚都会出现问题。现在，经过一些谷歌搜索，我发现了以下内容:

http://getbootstrap.com/examples/sticky-footer/

我尝试应用它，但它并没有真正奏效...页脚没有留在页面底部，而是停留在我的屏幕底部。

这是页脚所在的位置:

Footer

也就是说，当我完全滚动到页面顶部时，谷歌浏览器在我的 mac 上显示的底部。

这是我使用的 HTML:

<body>
    <div id="wrapper">
    <!-- A lot of content -->
    </div>
    <footer>

    </footer>
</body>

还有 CSS:

html {
  box-sizing: border-box;
  height: 100%;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    background: url(../img/bg.png);
}

#wrapper {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0,0,60px;
}

footer {
    background-color: #292929;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
}

那么这个页脚是如何将我的屏幕底部与我的页面底部混淆的呢？

谢谢。

最佳答案

为什么不将页脚的 position 更改为 relative 然后它将出现在包装 div 的底部。

http://jsfiddle.net/vh23mfpk/

关于html - 粘性页脚位于屏幕底部，而不是页面底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30093115/