Question

因此，每次我创建一个网站时，我都会遇到页脚问题。现在，经过一些谷歌搜索，我发现了以下内容：

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;
}

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

感谢。

Answer 1

此处的问题是您的body和html的高度为100% 当您为body和html元素指定100％的高度时，无论其内容如何，它们都不会超出窗口的高度。

您应该删除这些属性，然后将min-height: 100%添加到html

您应该检查刚刚关联的示例页面，以查看html和body的属性。

Answer 2

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

http://jsfiddle.net/vh23mfpk/

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

2 个答案: