CSS如何使背景适合整个页面？

Question

我的页面很长，需要用户滚动才能查看整个内容。即使用户调整窗口大小，我也希望背景（它是CSS3渐变）在整个页面长度范围内伸展。我正在使用另一个执行此操作的线程中的一些代码。但是，一旦我将页面切换到全屏，背景就会在底部被切断。我正在使用的代码如下。

]

Answer 1

尝试将body和html元素的min-height设置为100％。发生的事情是身体实际上并没有一直延伸到视口的底部，所以背景也不会向下延伸（只有身体高度的100％或html标签（如果你设置了背景w） / CSS）。

您应该可以在没有任何JavaScript的情况下执行此操作（您可以更好地使用它）。 例如：

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

body {
    background: #ccc; /* Replace "#ccc" with your css gradient */
    background-size: 100% 100%;
}

如果您想要一些视觉效果，可以使用http://www.colorzilla.com/gradient-editor/之类的在线工具为渐变生成所需的CSS。

Answer 2

您还可以尝试使用vw（视口宽度的百分之）和vh（百分之一秒）设置主体以覆盖所需背景的整个页面来自CSS3

的视口高度）

body {
    background: #ccc; /* Replace "#ccc" with your css gradient */
    height: 100vh;
    width: 100vw;
}