根据浏览器窗口大小（HTML、CSS）调整背景图像大小

Question

我正在尝试让我的背景渐变填充浏览器窗口的可用“空间”。 Here is an example of what is currently happening.相关代码已复制粘贴，如有遗漏请告知！

我尝试了here 和here 列出的方法，但没有一个对我有用。还有其他建议，还是我遗漏了一些明显的东西？谢谢！

.mainbody {
  background: linear-gradient(#42f4d7, #f4425f) no-repeat center center fixed;
  border-style: solid;
  border-color: #ffffff;
  font-family: Helvetica, sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  min-width: 50%;
  min-height: 50%;
  width: 100%;
}

<div class="mainbody"></div>

Answer 1

您可以使用的最简单的选择是将此渐变应用于body，而不是div。

body {
  background: linear-gradient(#42f4d7, #f4425f) no-repeat center center fixed;
  border-style: solid;
  border-color: #ffffff;
  font-family: Helvetica, sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  min-width: 50%;
  min-height: 50%;
  width: 100%;
}

<div class="mainbody"></div>

Answer 2

根据@SergChernata 将高度设置为 100% 或更改 body 标签以覆盖整个高度 :)

.mainbody {
  background: linear-gradient(#42f4d7, #f4425f) no-repeat center center fixed;
  border-style: solid;
  border-color: #ffffff;
  font-family: Helvetica, sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  min-width: 50%;
  height: 100%;
  width: 100%;
}

<div class="mainbody"></div>

Answer 3

如果我理解正确，您只需将元素的高度和宽度设置为 100%，然后它将覆盖任何设备的所有屏幕尺寸。当然，如果它是一个绝对元素，它必须与已经具有窗口大小的东西相关。现在，大小将是最近的父级的 100%，归因于它的“位置：相对”。如果你想确保它实际上是 100% 的屏幕，只要确保它的父母都没有“位置：相对”属性。如果您想确定，可以将它们设置为“位置：静态”。

.mainbody {
  background-image: linear-gradient(#42f4d7, #f4425f);
  border-style: solid;
  border-color: #ffffff;
  font-family: Helvetica, sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="mainbody"></div>