当 html 和 body 高度设置为 100% 时背景切断答案

【问题标题】：Background cuts off when html and body height are set to 100%当 html 和 body 高度设置为 100% 时背景切断
【发布时间】：2012-01-02 15:47:26
【问题描述】：

我将我的 html 和 body 设置为 100% 的高度，并在 body 上设置了一个背景图像，向下滚动时会被截断，如下所示。

但是，YouTube 在 html 和 body 上具有 100% 的高度，在 body 上具有背景，并且它延伸到内容的完整高度。我怎样才能做到这一点？

【问题讨论】：

这是背景色还是图片？
那真的是图像吗？有什么原因你不能简单地使用颜色吗？ 100% 在 DOM 加载时被读取，所以基本上 100% 意味着 100% 的窗口高度，而不是 100% 的内容。还有 background-cover CSS 选项。显示一些代码...可能有一些解决方案。
是的，有一张图片。 CSS 可以在这里找到：cdn.crayze.com/css/photocrayze.css
认真的吗？发布正文和背景的相关代码，而不是要求我们通过缩小版本进行筛选如何？无论如何，从 body 标签中删除高度，您的图像将完全平铺。您是否还有其他原因想要或需要将正文设置为 100%？
那么 100% 高度的原因是如果页面高度小于浏览器视口高度，则背景会一直拉伸到底部，否则背景不会拉伸到对于那种情况，底部也是如此。我想我会发布完整的代码，以防它在相关代码之前继承的任何东西有什么不同。还有在线工具可以取消缩小：mrcoles.com/blog/css-unminify

【解决方案1】：

如果您放置 100% 高度的唯一原因是用于背景（正如您的一位 cmets 似乎建议的那样），那么只需将其更改为 min-height: 100% 即可，您应该没有问题。您将在短页面上拥有 100% 的高度，但在较长的页面上可以扩展至您需要的高度。

【讨论】：

【解决方案2】：

除非您知道确切的总高度，否则您无法扩展图像。背景图像“扩展”到底部。网站通常会使用缓慢“淡化”为纯色的图像，然后将背景设置为该纯色。

另一种常见的解决方案是将背景图像标记为固定，这样它就不会滚动，因此总是按预期显示。

body 上的 100% 高度是骗局... 8-) 它一般代表 100% 的窗口，而不是 body。

【讨论】：

【解决方案3】：

背景图像不会自动拉伸以填充其容器。如果要创建“连续”背景，则应使用 repeat-y 属性（使图像垂直重复），设置背景位置：固定，或者在纯色的情况下，只需设置彩色背景。

在您的情况下，您的背景看起来是纯色的。我可以建议只使用简单的背景颜色吗？它使您的 CSS 更易于阅读和更改，并且还为您的服务器节省了一些带宽。

【讨论】：