当html和身高设置为100％时，背景会中断

Question

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

但是，YouTube在html和正文上有100％的高度，在正文上有背景，并且它会延伸到内容的整个高度。我怎样才能做到这一点？

Answer 1

如果您将100％高度的仅原因用于后台（正如您的其中一条评论似乎建议的那样），那么只需将其更改为min-height: 100%，您就应该没有的问题。您将在短页面上拥有100％的高度，但在较长的页面上可以根据需要进行扩展。

Answer 2

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

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

身体的100％高度是骗局... 8-）它通常代表窗户的100％，而不是身体。

Answer 3

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

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