0

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

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

谢谢你。

4

2 回答 2

2

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

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

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

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

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

.Header
.Logo
.body

请注意，通过这些更改，您的页面看起来会很混乱（特别是周围会有很多滚动条）。

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

  • 设置徽标大小不应该是必需的。
  • Header 上的项目符号点高度太低。我也会删除它。

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

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

于 2013-02-20T04:27:01.793 回答
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;}

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

于 2013-02-20T03:49:04.667 回答