如何更改浏览器窗口下方的颜色以匹配页脚答案

【问题标题】：How to change color below browser window to match footer如何更改浏览器窗口下方的颜色以匹配页脚
【发布时间】：2017-08-15 00:16:34
【问题描述】：

下面我有一个页脚，它是深紫色。但是，当我滚动到页脚末尾时，它是白色的。如何更改此白色以匹配页脚颜色，而不更改我顶部所有内容的背景颜色？

我只想在用户尝试滚动页脚时显示此颜色，而不是文档中的其他任何位置（或者例如当用户尝试在导航上方滚动时）。

使用html {background-color: purple} 为包括顶部在内的整个文档着色，但我希望这种颜色只显示在底部。

使用html {background: linear-gradient(white, purple)} 会在我的整个页面上留下一个渐变，但更重要的是它在顶部显示为紫色，在底部显示为白色。

编辑（更好的例子）

考虑https://codepen.io。访问主页。现在，当您尝试在导航栏上方滚动时，它会显示为深灰色。当您尝试滚动到页脚下方时，它也会显示为深灰色。现在我想做的是当用户滚动经过 footer 时显示该颜色，而不是导航。

【问题讨论】：

您好。为了让我们帮助您处理 CSS，您需要同时提供 CSS 和 HTML；没有它，我们无法重现您的问题。请更新您的问题，使其在minimal, complete, and verifiable example 中显示所有相关代码。如果您的 HTML 是在服务器端生成的，请发布输出。如需更多信息，请参阅有关how to ask good questions 的帮助文章，并采取tour of the site :)
话虽如此，它听起来就像您在寻找body { margin: 0 }，这可以确保内容与边缘“齐平”，消除空白。跨度>
不，它与边缘齐平。但是当您到达过去的末尾时，您会看到 HTML 空白。考虑codepen.io。当您滚动超过页脚末尾时，它是灰色的。我想实现这一点，但我只希望底部是那种颜色而不是顶部。你明白了吗？
不，恐怕我不知道。 CodePen 上面有 no 空格。它有一个标题，然后是一个黑色部分，然后是一个灰色部分，然后是另一个黑色部分。这些都是独立定义和着色的部分。只需定义三个部分，并将每个部分设置为具有背景颜色。您不应依赖定义的“部分”之外的任何内容；如果您的“溢出”内容只是直接位于<body> 内，请给它自己的<div>。但是，正如我所说，您需要提供您的代码以获得进一步的帮助。
@itodd 您的解决方案对我有用。我最初没有工作，但这是由于我修复了其他代码。谢谢，我认为您应该将其发布为答案。

标签： html css colors background

【解决方案1】：

听起来您的问题来自两种类型的内容；具有自己背景颜色的已定义内容部分，然后直接位于正文上的未定义内容。我认为它看起来像这样：

body {
  margin: 0;
  background: yellow;
}

.content {
  height: 1900px;
  background: white;
}

<body>
  Header content
  <div class="content"></div>
  Footer content
</body>

请注意，如果我要更改“页眉”的颜色，页脚会也改变颜色。您正在尝试使用线性渐变来解决此问题，但问题根本不在于 color；这是 layout。

您要做的是将内容的每个部分分解为自己的<div>。这样，您可以单独为每个部分设置样式，从而为页眉和页脚设置不同的颜色：

header {
  height: 50px;
  background: yellow;
}

.content {
  height: 1000px;
}

footer {
  height: 50px;
  background: purple;
}

body {
  margin: 0px;
}

<header></header>
<div class="content"></div>
<footer></footer>

请注意，如果您可以在某些网站上滚动到页脚之外，这可能是因为手机可以在滚动效果上“摇摆”到底部。此“额外”内容不存在，是您的手机试图“赶上”页面底部位置而产生的空白。

您可以通过直接在html 上为background 属性设置颜色来控制该颜色。只要您的所有“实际”内容覆盖html 中设置的颜色，您就可以将此颜色设置为您想要的任何颜色。但是，它真的不需要担心，可以放心地保留为默认白色。

希望这会有所帮助！ :)

【讨论】：