Javascript HTML CSS线性渐变可以'；t覆盖高度高于视口

我是web开发的初学者。如果我的措辞不符合程序员标准，我会事先道歉

以下是我努力实现的目标： 1.可容纳任意高度的多个div。在本例中，一个具有视口的高度，另一个更高（2000px）。 2. 'body元素充当包装器，它具有覆盖所有div区域的线性渐变背景

使用一些边框，我可以看到“body”自身的大小与“div”的内部大小相对应。但是，渐变将在视口高度上停止。注意：如果我切换到平面颜色，它会工作

这是我的HTML（简化了很多，但要点仍然有效）：

html{
字体系列：“Exo 2”，无衬线；
字号：中等；
保证金：0；
填充：0；
身高：100%；
最小高度：100%；
}
身体{
背景：线性梯度（到底部，rgba（192196203,1），rgba（42,43,44,1））；
背景重复：无重复；
保证金：0；
填充：0；
边框：5px纯金；
/*仅用于可视化区域*/
}
#框1{
宽度：100%；
高度：100vh；
/*视口高度，我最近试图解决这个问题*/
边框：5px纯红；
/*仅用于可视化区域*/
}
#框2{
宽度：100%；
高度：2000px；
边框：5px纯红；
/*仅用于可视化区域*/
}

---

从html的

正文中删除
高度
和
最小高度