Question

我是网络开发的初学者。如果我的言辞不是程序员标准，我事先道歉。

这是我想要实现的目标： 1.可以占据任何高度的多个div。在此示例中，一个具有视口的高度，另一个具有较高的（2000px）。 2.'body'元素充当包装器，它具有覆盖所有div区域的线性渐变背景。

使用一些边框，我可以看到'body'相应于它内部的'div'。但是，渐变在视口高度处停止。注意：如果我切换到平面颜色，它可以工作。

这是我的HTML（非常简化，但重点仍然有效）：

html {
  font-family: 'Exo 2', sans-serif;
  font-size: medium;
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
}
body {
  background: linear-gradient(to bottom, rgba(192, 196, 203, 1), rgba(42, 43, 44, 1));
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  border: 5px solid gold;
  /*just for visualizing area*/
}
#box1 {
  width: 100%;
  height: 100vh;
  /*viewport height, something I recently tried as an attempt to solve the problem*/
  border: 5px solid red;
  /*just for visualizing area*/
}
#box2 {
  width: 100%;
  height: 2000px;
  border: 5px solid red;
  /*just for visualizing area*/
}

<html>
<head>
  <link rel="stylesheet" type="text/css" href="Style/mystyle.css">
</head>

<body>
  <div id="box1"></div>
  <div id='box2'></div>
</body>
</html>

Answer 1

从height

中删除min-height和body,html

<强> DEMO

HTML CSS线性渐变无法覆盖高于视口的高度

1 个答案: