1

我从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}. 这些是从另一个文件/字符串中提取的。

问题1：

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

这个页脚是重叠的！

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

问题2：

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

在此处输入图像描述

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

欢迎任何意见。感谢您的关注！

4

2 回答 2

1

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

<div id="content">...</div>
于 2012-06-01T02:09:20.093 回答
1

1）尝试改变

#footer { position: relative; }

至#footer {position: absolute; }

2）添加到您的代码

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

于 2012-06-01T02:16:24.043 回答