Javascript 当我缩小窗口时，为什么彩色背景不能完全覆盖我的页面？

我正在制作一个网页，背景中有渐变的动态变化

这里有两列——一列是手机的照片，另一列是一些文字。当网页全屏显示时，它看起来就像我想要的一样-渐变层覆盖了整个背景（拉伸到宽度/高度），照片位于文本旁边：

但是，当我水平缩小网页时，文本位于图像下方（这很好），但渐变并不覆盖整个页面，如图所示：

下面是完整的JSFIDLE和我的代码：

在

css

样式表中，我有以下代码：

#gradient {
  width: 100%;
  height: 100vh;
}

所以我认为它应该起作用，但它不起作用

---

你能帮我解释一下为什么它不能正常工作吗？

在评论后更改了答案：

看来我找到了解决办法：

1.）我更改了Javascript中的选择器，以便将渐变应用于

主体

，而不是

#渐变

2.）在CSS中，我更改了以下内容：

html,
body {
  background-color: #333;
  height: 100%;
  overflow: auto;
}

及

---

添加html和body标记，使其宽度和高度与#渐变ID相同：

var colors=新数组(
[62,35,255],
[60,255,60],
[255,35,98],
[45,175,230],
[255,0,255],
[255,128,0]);
var阶跃=0；
//颜色表索引用于：
//当前左侧颜色
//剩下的下一个颜色
//当前颜色权限
//下一个颜色对吗
var颜色指数=[0,1,2,3]；
//过渡速度
var梯度速度=0.002；
函数updateGradient（）
{
如果（$==未定义）返回；
var c0_0=颜色[颜色指数[0]；
var c0_1=颜色[颜色指数[1]；
var c1_0=颜色[颜色指数[2]；
var c1_1=颜色[颜色指数[3]；
var istep=1-步；
var r1=数学舍入（istep*c0_0[0]+步骤*c0_1[0]）；
变量g1=数学舍入（istep*c0_0[1]+步骤*c0_1[1]）；
变量b1=数学舍入（istep*c0_0[2]+步骤*c0_1[2]）；
var color1=“rgb（“+r1+”、“+g1+”、“+b1+”）；
var r2=数学舍入（istep*c1_0[0]+步骤*c1_1[0]）；
var g2=数学舍入（istep*c1_0[1]+步骤*c1_1[1]）；
变量b2=数学舍入（istep*c1_0[2]+步骤*c1_1[2]）；
var color2=“rgb（“+r2+”、“+g2+”、“+b2+”）；
$（'#gradient'）.css({
背景：“-webkit渐变（线性、左上、右上、从（“+color1+”）到（“+color2+”）））.css({
背景：“-moz线性梯度（左，“+color1+”0%，“+color2+”100%）”；
步长+=梯度速度；
如果（步骤>=1）
{
步骤%=1；
颜色索引[0]=颜色索引[1]；
颜色指数[2]=颜色指数[3]；
//选择两个新的目标颜色索引
//不要拾取与当前相同的
colorIndexes[1]=（colorIndexes[1]+数学地板（1+数学随机（）*（colors.length-1）））%colors.length；
colorIndexes[3]=（colorIndexes[3]+数学地板（1+数学随机（）*（colors.length-1）））%colors.length；
}
}
setInterval（updateGraient，10）
html，
身体{
身高：100%；
背景色：#333；
}
身体{
颜色：#fff；
文本对齐：居中；
文本阴影：0 1px 3px rgba（0,0,0,5）；
}
/*用于表格样式垂直和水平居中的额外标记和样式*/
.网站包装{
显示：表格；
宽度：100%；
高度：100%；/*至少适用于Firefox*/
最小高度：100%；
-webkit盒阴影：插入0,0 100px rgba（0,0,0,5）；
盒影：嵌入0.100px rgba（0,0,0,5）；
}
.站点包装器内部{
显示：表格单元格；
垂直对齐：顶部；
}
.盖上容器{
右边距：自动；
左边距：自动；
}
/*间距填充*/
.内部{
填充：30px；
}
/*
*掩护
*/
.掩护{
填充：0 20px；
}
@介质（最小宽度：768px）{
/*开始垂直定心*/
.站点包装器内部{
垂直对齐：中间对齐；
}
/*处理宽度*/
.盖上容器{
宽度：100%；/*必须是水平对齐的百分比或像素*/
}
}
@介质（最小宽度：992px）{
.盖上容器{
宽度：700px；
}
}
#梯度{
宽度：100%；
身高：vh%；
}
@仅介质屏幕和（最大宽度：500px）{/*根据需要更改最大值*/
html，
身体{
宽度：100%；
身高：vh%；
}
}

标题
测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试课文测试课文测试课文测试课文测试课文测试课文测试课文测试课文测试课文测试课文测试课文测试课文测试课文测试课文测试课文测试课文测试课文测试课文测试课文测试课文测试课文测试课文测试课文测试课文测试课文测试课文测试课文测试课文测试课文

我真的不明白你想达到什么目的，但去掉了
高度：100vh
将允许渐变垂直延伸。@AndreiV但是如果我删除
高度
，那么当用户进入页面时，他会看到渐变没有垂直延伸谢谢，但是问题是现在当页面处于全屏时，渐变没有垂直覆盖整页，如图所示，这就是为什么我使用height 100vh垂直拉伸显示它，我将
min height
添加到
body
，但它没有改变效果，请查看结果：请注意我更改的答案和新的Fiddle现在可以了，非常感谢您的更改，我还有一个问题-我想避免将其附加到
正文
，因为我计划在底部添加另一个白色部分，当用户向下滚动屏幕时可以看到。因此，我想将它附加到
gradient
div。我想实现的是：当用户打开页面时，他会看到整个屏幕上的渐变，当他向下滚动时，会出现包含其他内容的白色部分。这是可以实现的吗
#gradient {
  width: 100%;
  height: 100%;
}

html,
body,
#gradient {
  width: 100%;
  height: vh%;
}