如何创建覆盖整个可见垂直空间的线性渐变(或过渡到实体?)

Question

我正试图获得一个线性梯度来处理页面的主体元素。这是CSS：

body {
background: linear-gradient(0deg, white, lightgray);
}

然而，正如预期的那样，这会产生从白色到浅灰色的渐变，但它只出现在内容后面，而不是延伸到浏览器窗口底部的内容下面的"空白"区域(当然，当内容没有完全填满它时(

更奇怪的是，"空白"区域被设置为某种"灰色"级别，我不知道它来自哪里，也不知道如何更改它

为了解决后者，我尝试了这个，认为当渐变"完成"时，它会继续使用纯色，但这没有效果：

body {
background: linear-gradient(0deg, white, lightgray);
background-color: lightgray;
}

如果我去掉渐变线，那么整个背景就会像我预期的那样变成lightgray，而不是以前的"随机灰色"。

那么，如何做到这两个：

1. 使渐变延伸到整个窗口(当内容未到达底部时(或
2. 使渐变的结束颜色"继续经过"结束，以填充可见区域的其余部分

两者都对我有用，但我被难住了。

Answer 1

正如您所说，这真的很奇怪，背景颜色确实占据了窗口的整个高度，而背景渐变却没有。

奇怪的是，如果您可以指定一些min-height到body，那么有一种方法/破解方法。

body {
margin: 0;
background: linear-gradient(0deg, white, lightgray) no-repeat;
background-color: lightgray;
min-height: 100vh;
}

注意：我们这里有min-height，所以即使内容超过窗口高度或没有内容也无关紧要，它可以双向工作。

更新：

1vh＝视口高度的1%。

vh是CSS单元。

它基本上适用于视口的高度。因此，我们需要身体来获取整个视口的高度，而不考虑身体内部的内容量。

因此100vh=视口高度的100%。

有关Viewport的详细信息，请遵循以下内容。

支持：关于视口单位支持跨浏览器。您可以关注此链接。

希望这对你有帮助。

Answer 2

事实证明，您提供的代码几乎就在那里。当你看到变化时，你会笑的。

body {
background: linear-gradient(180deg, white, lightgray) no-repeat;
background-color: lightgray;
}

我只是在后台属性中添加了"不重复"。渐变从内容的顶部渐变到底部，然后替换为单个实心渐变。

下面是一个使用中的片段：

"use strict";
function newEl(tag){return document.createElement(tag)}
function byId(id){return document.getElementById(id)}
window.addEventListener('load', onWindowLoaded, false);
function onWindowLoaded(evt) {
doDraw();
}
function doDraw() {
var can = byId('output');
var ctx = can.getContext('2d');
ctx.translate(0.5, 0.5);
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, can.width,can.height);
ctx.strokeStyle = '#d9d9d9';

ctx.beginPath();
for (var y = 0; y < can.height; y += 16) {
ctx.moveTo(0, y);
ctx.lineTo(can.width, y);
}

for (var x = 0; x < can.width; x += 16) {
ctx.moveTo(x, 0);
ctx.lineTo(x, can.height);
}
ctx.stroke();
}

body {
background: linear-gradient(180deg, white, lightgray) no-repeat;
background-color: lightgray;
}

<canvas id='output' width='241' height='225' />