为什么页脚不是从左到右一直走？答案

【问题标题】：Why isn't the footer going all the way from left to right?为什么页脚不是从左到右一直走？
【发布时间】：2013-02-04 23:40:51
【问题描述】：

我的 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;}

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

谢谢。

【问题讨论】：

以jsfiddle.net为例

标签： css background footer background-repeat

【解决方案1】：

你试过左右像素为 0 吗？

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

我认为它可能是它所在的容器

【讨论】：

【解决方案2】：

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

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

我通常不希望在浮动元素上出现这种行为，因此避免这种情况的一种方法是在父容器中设置 overflow: auto。

另外，你的标题布局看起来很奇怪。当我有明确的解决方案时，我会更新它。

第一次更新： 我已经向每个带有浮动元素的父母添加了 overflow: auto，现在它对我有用。请将该规则添加到以下元素中：

.Header
.Logo
.body

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

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

不需要设置徽标大小。
页眉上的项目符号点高度太低。我也会删除它。

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

很抱歉，无法在评论中解释所有这些，但请随时问我任何问题。

【讨论】：