css - 为什么页脚不是一直从左到右？

Question

我的 css 类页脚的背景不会跨越浏览器的整个宽度，具体取决于我保持浏览器的宽度。它使页面看起来很奇怪，因为页脚在主要内容结束之前就结束了。该站点位于 avidest.com，因此您可以看到我指的是什么。这是 CSS:

.Footer { width: 100%; padding:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background:#d9d9d9; background-repeat: top-repeat-x;}

css 原本是:

.Footer { width: 100%; padding:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background:#d9d9d9;}

但这也没有用。如何使页脚从浏览器的左侧一直延伸到右侧？

谢谢。

Answer 1

使用 chrome 检查器查看您的网页，此错误似乎与 float 所有列和标题有关。

当您 float 一个元素时，该元素会“脱离”文档流。这意味着在布局时不会考虑该元素的实际大小。

我通常不希望在 float 元素上有这种行为，所以避免这种情况的一种方法是在父容器中设置 overflow: auto。

此外，您的页眉布局看起来很奇怪。当我有明确的解决方案时，我会更新它。

第一次更新:我已经将 overflow: auto 添加到每个具有 float 元素的父级，现在它对我有用。请将该规则添加到以下元素:

.Header
.Logo
.body

请注意，进行这些更改后，您的页面看起来会很乱(具体来说，周围会有许多滚动条)。

这是因为您对事物的大小设置过于严格了。相反，我会让事情更自然地进行。例如:

• 不必设置 Logo 大小。
• 页眉上的元素符号点高度太低。我也会删除它。

我要做的另一件事是将背景图像分成 3 份(或至少 2 份，标题和内容)。这样，事情就会更加解耦并且更容易改变。尝试将每个“逻辑” block (页眉、页脚、侧边栏、登录表单)视为一个独立的模块，不应与其他模块(图像、类等)共享内容。

很抱歉，所有这些都无法在评论中解释，但请不要犹豫，问我任何问题。