Html 我创建了内容大小和背景大小之间的关联。为什么？

嘿，伙计们 我正在为班级创建一个网站。我只是添加了一个小的线性渐变，以从背景图像混合到背景色。背景在：root中定义，因此我使用：root:before添加渐变。在一个有足够内容的页面上，一切正常。但是在内容较少的页面上，背景图像较小，并且随着内容的增加而增加。 我不知道为什么

SCSS

：根目录{
背景：$背景色；
/*绝对韦林克斯图片*/
背景图片：url(http://w4.wallls.com/uploads/original/201711/23/wallls.com_163130.jpg);
背景重复：无重复；
背景尺寸：包含；
框大小：边框框；
字号：1.1rem；
字体系列：蒙特塞拉特，无衬线；
滚动行为：平滑；
}
：root:before{
内容：“；
位置：绝对位置；
底部-15%；
宽度：100%；
高度：100px；
背景：线性渐变（至顶部，$背景色，透明）；
}
罪魁祸首不是
背景图像
，而是
根
本身。因为它里面没有任何内容，
根的默认宽度和高度
随着它里面的内容而增长。您可以执行以下操作-


：根目录{
最小宽度：100vw；
最小高度：100vh；
背景：$背景色；
/*绝对韦林克斯图片*/
背景图片：url(http://w4.wallls.com/uploads/original/201711/23/wallls.com_163130.jpg);
背景重复：无重复；
背景尺寸：包含；
框大小：边框框；
字号：1.1rem；
字体系列：蒙特塞拉特，无衬线；
滚动行为：平滑；
}
：root:before{
内容：“；
位置：绝对位置；
底部-15%；
宽度：100%；
高度：100px；
背景：线性渐变（至顶部，$背景色，透明）；
}
在Sapinder的帮助下，我开发了这个解决方案。使用最小宽度和最小高度是一个好主意。但由于滚动条必须从最小宽度中减去才能工作，为了防止x溢出，我必须在变量中创建一个小计算。
此外，我必须将背景大小从“包含”更改为100%，以始终填充整个背景。
我不知道这是设计背景样式的最佳或最优雅的方法，但它是有效的（除了渐变，但这不是问题的一部分）
新SCS：

$background-color: #344451;
$scrollbar-width: 5px; /*Only use a variable for this sure to accessibility of the number*/
$background-min-width: calc(100vw-$scrollbar-width); /*Substract the width of the scrollbar from the minimal background width.*/

:root {
   min-width: $background-min-width;
   min-height: 100vh;
   background: $background-color;
   /*Absolut verlinktes Bild*/
   background-image: url(http://w4.wallls.com/uploads/original/201711/23/wallls.com_163130.jpg);
   background-repeat: no-repeat;
   background-size: 100%;

   box-sizing: border-box;
   font-size: 1.1rem;
   font-family: Montserrat, sans-serif;
   scroll-behavior: smooth;
}
:root:before {
   content: "";
   position: absolute;
   bottom: -15%;
   width: 100%;
   height: 100px;
   background: linear-gradient(to top, $background-color, transparent);
}

你的帮助使我离目的地更近了！thxx