粘性页脚将内容推到页面下方

Question

我试图从这里设置粘性页脚

这是jsfiddle http://jsfiddle.net/pbhE8/

我的网站：http://22twenty.com/Test

正如您所看到的，页脚被推到内容的底部之外。

我无法发布更多链接，但我确信你可以获得css，以及你发布的网站上可能需要的任何其他内容。

希望有人可以提供帮助

丹佛

Answer 1

我认为您想要做的是将页脚div粘贴到页面底部，但不要覆盖页面中间的任何内容。我之前没有使用过“粘性页脚”，但是我已经在几个网站上做过这个，这就是我做的事情（实际上来自几个星期前我在这里提出的一个问题。

创建一个围绕整个网站内容的<div>。将此div的css设置为：

#wrapper {
min-height: 100%;
width: 100%;
position: absolute;
}

在页面中间创建一个内容div，其中您网站的主要内容将使用css：

#maincontent {
width: 'some width';
height: 'some height';
margin-bottom: 'the height of the footer'
overflow: auto;
}

然后用css：

将你的页脚div嵌入'底部'div中

#bottom {
width: 100%;
position: absolute;
bottom: 0;
}

然后，只要主内容div的边距与页脚div的高度相同，它们就不会重叠，但页脚将位于“底部”div内，该div“卡在”浏览器窗口的底部。

希望如果您有任何疑问或需要进一步的帮助，请帮助我。