我有一个我用过的网页
html, body {
height: 100%;
margin: 0;
padding: 0;
}
为了在我的内容不存在时填充屏幕的其余部分 里面有足够的东西可以越过底部。
因为 body/html 元素是根据视口(viewport)调整大小的，所以当我这样做时 有足够的内容可以滚动，尽管如此，我的背景图片还是被切断了 什么应该是默认的 x/y 背景重复行为。
body {
color: rgb(51, 51, 51);
background-image: url('../img/stardust3.png');
}
html/body 标签保持其 100% 的高度尺寸，但 100% 的视口(viewport)小于必须滚动的文档。最终，我的 html/body 标签卡在了顶部。
在此之前，我是用javascript抓取文档大小，不断变化 调整屏幕大小时的元素尺寸。我必须回到那个吗？
谢谢!
最佳答案
如果您只设置 height: 100%将背景图像扩展到页面底部，不要。 <html> 的背景无论内容如何，元素都将始终填充视口(viewport)。此外，html 元素上没有内置边距。相反，使用:
html { background-image: url(../img/stardust3.png); }
body { margin: 0; padding: 0; }
关于javascript - html，背景图像由于高度 : 100% setting 而无法重复，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26554239/