cssstickyfooter.com 的 CSS 页脚无法正常工作答案

【问题标题】：CSS footer from cssstickyfooter.com not working correctlycssstickyfooter.com 的 CSS 页脚无法正常工作
【发布时间】：2012-06-06 07:06:10
【问题描述】：

我从http://www.cssstickyfooter.com/ 获得了一些简单的 CSS，以得到一个无论内容多长始终保持不变的页脚。现在，这实际上不起作用。这个页脚有两个不同的问题，但我会在这里问他们两个，因为我怀疑它们是相关的。

首先是来自该网站的 css：

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;}

这是我用于整个页面的 HTML：

<html>
    <head>
        <title>{$title_text}</title>
        <link rel="stylesheet" type="text/css" href="/global/global.css" />
    </head>
    <body>
        <div id="wrap">
            {$navbar}<hr><div id="content">{$body}</div>
        </div>
        <div id="footer">
            {$footer}
        </div>
    </body>
</html>

如您所见，有些变量的格式为{$variable}。这些是从另一个文件/字符串中提取的。

问题一：

页脚太高，与页面上的其他内容重叠。看起来是这样的：

为了解决这个问题，我在 ID wrap 的 div 中添加了 200px 的内边距，就在页脚之前（参见上面的 HTML）。这将解决您在图片中看到的问题。但这会导致另一个问题：现在在内容很少的页面上，页脚仍然向下移动了 200 像素，您必须向下滚动才能看到它。我得到这个 CSS 代码的网站说这不应该发生。

问题2：

页脚没有到达浏览器窗口的边缘。这就是我要说的：

页脚应该“接触”窗口的左右两侧，但正如您所看到的，似乎有一个小的边距。老实说，我不知道如何开始解决这个问题。但我不认为这是一个错误，因为它在 Chrome、Firefox 中呈现相同的方式，我认为甚至在 Internet Explorer 中也是如此。

欢迎任何意见。感谢收看！

【问题讨论】：

标签： css footer sticky-footer

【解决方案1】：

1) 尝试改变

#footer { position: relative; }

致#footer {position: absolute; }

2) 添加到您的代码中

html, body { padding: 0; margin: 0; } 防止页脚周围出现空格

【讨论】：

您好，谢谢您的回答。由于@ltiong_sh 已经解决了问题 1 并且我接受了他的回答，我觉得在另一个问题中询问问题 2 是正确的。我会在我写这个问题的时候链接到那个问题，这样你就可以回答了。
你能在这里再回答一次，这样你就可以得到荣誉了吗？ stackoverflow.com/questions/10843657/…

【解决方案2】：

您的 html 似乎与您的 css 不匹配。您的 css 包含一个“#main”，但您的主要内容出现在

<div id="content">...</div>

【讨论】：

很抱歉。但实际上并非如此，我改变了从主要内容到内容的所有内容，包括 CSS。我粘贴到问题中的 CSS 直接来自我链接到的那个站点，没有进行任何更改。如果您愿意，我可以发布更改。
ya..应该发布或更新破坏的代码。
哇，你是对的。我站纠正！我像你说的那样去获取CSS，发现实际上我并没有将其更改为“内容”。糟糕！
这解决了问题 1。我想它毕竟与问题 2 无关。
可能希望将问题 2 拆分为新问题。否则这可能会很长。你有什么东西可以控制#footer 的宽度吗？