我的背景底部莫名被截断答案

【问题标题】：Bottom of my background inexplicable cut off我的背景底部莫名被截断
【发布时间】：2013-09-21 08:56:18
【问题描述】：

我的页面底部的背景图像出现奇怪的截断。只有当您有一个较短的浏览器窗口并滚动到最底部时，这一点才很明显。而且它只发生在较长的页面上。

Firebug 检查显示了一个 viewport-width 元素，它在浏览器窗口的最底部完全伸展，大约 50 像素高，似乎“阻挡”了它，但这与我的布局中的任何 div 都不对应——我能找到，反正！

此外，当滚动这个奇怪的元素时，它是在 Firebug 中突出显示的第一行 <HTML lang="en-us">。

较长的页面：http://bit.ly/151TFnW

============FOLLOWUP==================

按照此处的有用建议，我通过从 BODY 样式中删除 100% 高度来修复上述问题。但这会破坏其他东西！现在，在这个较短的页面上：

短页：http://bit.ly/1fvbnHY

当浏览器窗口足够高以显示它时，背景图像仍然在底部被切断。

删除 BODY 上的 100%，第二个较短的页面就可以了 - 完整的 bg 图像和底部边距 - 但早期链接的问题又回来了。

帮助....！！！

【问题讨论】：

我也很困惑。这似乎是在没有任何支持 HTML 的情况下发生的。确实很神秘。
嗯，这在技术上可能无法解决具体问题，但我暂时确实解决了它。我修改了保存背景图像（树）的 div 的 css，将“height=100%”更改为“height=2000px”（大于图像的高度）。（我也注意到树的渐变底部实际上被切断了。）现在它看起来很漂亮。缺点是，即使页面的其余部分完全可见，它也会添加滚动条。所以，还没有完全“解决”，但“解决得够多了”……
不要以为您可以在某处发布没有任意 2000px 高度的版本，或者创建一个仅包含重要部分的 jsFiddle？
嗨蒂森！我对 CSS 进行了一些更改，恢复到 100% 的高度，而不是固定的 2000 像素 - 虚假的滚动条并没有随我的客户一起飞，因为我怀疑它们不会飞。上面的 bit.ly 链接会将您带到与当前相同的页面。那个深绿色的缝隙比以往任何时候都大……

标签： html css background-image

【解决方案1】：

好吧，它可能被认为是正确的修复，也可能不被认为是正确的修复，因为它没有解决问题页面对“100% 高度的正文”设置的反应与网站其他部分不同的原因......但我通过使用 CSS 定位它来解决它，这样问题页面就不会收到该 CSS 规则。

所以，松了口气，但我意识到我并没有真正弄清楚它为什么在做它正在做的事情。

【讨论】：

具体来说，我在 WordPress 主题的标题中添加了条件代码，以便 HTML 标记仅在受影响的页面上应用“class=heightfix”；然后在我的 CSS 中，我只给了 html.heightfix 100% 的高度。解决了！

【解决方案2】：

据我所知，这似乎是由分配给body 的height 值引起的。当我删除该规则时，大部分差距都会消失。我假设最后一点来自页脚溢出的一些边距。

【讨论】：

谢谢，这样做似乎可以解决问题！唉，有一个问题，他们在他们巨大的显示器底部看到了一个颜色略有不同的微小条子——我什至在我的（大但不如他们的）屏幕上都看不到这个问题，所以我今天不得不与他们进行屏幕共享会议来尝试解决这个问题。我做到了……部分解决方案是将 100% 的高度添加到 html。我把它留在里面，希望明天问题不会再出现。如果没有，我们很好。无论如何，非常感谢 Tieson 为我指明了正确的方向！
@AdamAbrams 如果您的背景版本只是树（具有透明背景），您可以将主体背景设为纯绿色或使用 CSS3 重新创建渐变。然后，您可以将树加载到另一个填充视口的图层中。 CSS3 还允许您拥有多个背景图像，尽管到目前为止我还不需要测试浏览器对这些规则的支持。
感谢 Tieson 的建议，但我不愿意重新打开现在重做网站布局的蠕虫罐 - 我即将结束这个非常挑剔的项目已经在许多其他方面，所以希望这不是必需的。随着问题的发展，我将发布后续评论与评论......
实际上我编辑了我的原始帖子来描述现在正在发生的事情，我很快就会发疯...... 8^)
如果有帮助，请提供更多信息：尽管我的 CSS 规则，BODY 不会达到 100% 的高度。我在 BODY 上添加了一个红色的 1px 边框来显示这一点 - 在“较短的”页面上，例如：bit.ly/1fvbnHY，它在没有明显原因的情况下停在离底部很远的地方。在所有其他页面上，都可以...