背景颜色是窗口 CSS 高度的 50%答案

【问题标题】：background color which is 50% of the height of the window CSS背景颜色是窗口 CSS 高度的 50%
【发布时间】：2019-02-25 17:49:36
【问题描述】：

试图在“一分为二”的页面上实现背景；对面有两种颜色，使用线性渐变，但如果某些元素（div）大高度背景颜色重复

<body>
 <div class="blocktest">
  test
 </div>
</body>

css：

body {
  background-image: linear-gradient(#000 50%, #ffffff 0%);
  height:100vh;
}
.blocktest {
  height:1500px;
}

demo

我想要页面颜色 1 的 50%，页面颜色的其余部分是颜色 2

【问题讨论】：

背景重复：不重复； ?如果我猜对了。

标签： html css

【解决方案1】：

使用min-height 代替height：

body {
  background-image: linear-gradient(#000 50%, #ffffff 0%);
  min-height: 100vh;
}

.blocktest {
  height: 1500px;
}

<div class="blocktest">
  test
</div>

实际上您的body 仅限于100vh 和background is getting propagated to root element 以覆盖整个屏幕。所以你会看到 2 个背景，一个是根元素，一个是主体。

如果您保留height:100vh 并向html 添加另一个背景，您会注意到：

body {
  background-image: linear-gradient(#000 50%, #ffffff 0%);
  height: 100vh;
}

.blocktest {
  height: 1500px;
}
html {
 background:pink;
}

<div class="blocktest">
  test
</div>

如果您只想覆盖背景的100vh，请将html 背景设为白色或禁用重复：

body {
  background-image: linear-gradient(#000 50%, #ffffff 0%);
  height: 100vh;
  /* Or background-repeat:no-repeat */
  margin:0;
}

.blocktest {
  height: 1500px;
}
html {
 background:white;
}

<div class="blocktest">
  test
</div>

【讨论】：