粘性页脚溢出问题？

Question

我的粘性页脚有问题。首先，我的内容没有到达屏幕的整个底部（即使在页脚下面..检查更大的显示器）。此外，当窗口小于内容时，当您移动水平滚动条时，标题会移动并且不会扩展100％的宽度。我做错了什么？

这是我的测试网站：My Site

如果您使用firebug或Google Chrome内置的Inspect Element，您可以看到所有元素的位置。

以下是一些css：

.content
{
    width: 1100px;
    margin: 0 auto;
    border-left:1px solid #000;
    border-right: 1px solid #000;
    background:#222;
    min-height: 100%;
    height: 100%;
    padding-bottom:50px; /* Padding for footer (width) */
}

.contentInner
{
    padding:0px 10px 0px 10px;
    min-height: 100%;
    height: 100%;
}
.footer
{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: #000; /* So you can see it */
}

以下是内容大于窗口时的样子：

我还希望内容能够一直延伸到页面的内容！

Answer 1

如果您将.mainContainer置于.content的宽度，则会有效。

.mainContainer {
    width: 1100px;
}

这是你想要的吗？

Answer 2

将CSS替换为此。

.content
{
    width: 100%;
    margin: 0 auto;
    border-left:1px solid #000;
    border-right: 1px solid #000;
    background:#222;
    min-height: auto;
    height: auto;
    padding-bottom:50px;
    position:absolute;
}

.contentInner
{
    padding:0px 10px 0px 10px;
    min-height: auto;
    height: auto;
}
.footer
{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: #000;
}

Answer 3

编辑/添加你的css，以摆脱较小的屏幕问题..

.mainContainer {
  min-width: 1100px;
}

要让内容背景一直向下，我建议在.mainContainer中使用居中的背景图片并删除内容背景或将.content min-height设置为某个较大的值，如900px或如果小于屏幕高度，请使用javascript设置内容高度。