Question

我有一个我用过的网页

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

为了在我的内容没有填写屏幕的其余部分时有足够的东西来超越底部。

因为body / html元素的大小是根据视口调整的，所以当我这样做时有足够的内容滚动，我的背景图像切断了尽管什么应该是默认的x / y背景重复行为。

body {
    color: rgb(51, 51, 51);
    background-image: url('../img/stardust3.png');
}

html / body标签保持100％高度尺寸，但100％视口小于您必须滚动的文档。最终，我的html / body标签卡在了顶部。

在此之前，我使用javascript来获取文档大小并不断更改调整屏幕大小时的元素尺寸。我必须回到那个吗？

谢谢！

Answer 1

如果您只是将height: 100%设置为将背景图片扩展到页面底部，请不要这样做。无论内容如何，<html>元素上的背景始终会填充视口。此外，html元素上没有内置边距。相反，使用：

html { background-image: url(../img/stardust3.png); }
body { margin: 0; padding: 0; }

Answer 2

尝试以下方法之一：

body{
    background-attachment: fixed;
}

这将使您的背景不会在页面的其余部分滚动。

html, body{
    min-height: 100%;
}

如果内容＆lt;

这将使您的html，正文与您的内容一起成长并填充屏幕100％。