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检查器查看您的网页时，此错误似乎与浮动所有列和标题有关。

浮动元素时，该元素会从文档流中“移出”。这意味着在布置东西时，不会考虑这个元素的实际大小。

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

此外，您的标题布局看起来很奇怪。当我有一个明确的解决方案时，我会更新这个。

首次更新： 我已将overflow: auto添加到具有浮动元素的每个父级，现在它对我有效。请将该规则添加到以下元素中：

.Header
.Logo
.body

请注意，通过这些更改，您的网页看起来会很混乱（具体来说，周围会有很多滚动条）。

这是因为你设置的东西有点过于严格。我会让事情更自然地流动。例如：

不需要设置徽标大小。
标题上的子弹点高度太少。我也会将其删除。

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

对不起，所有这些都不能在评论中解释，但请不要犹豫，问我任何事情。

Answer 2

您是否尝试过0和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 个答案: