如何锁定 LI 标签中的 DIV 调整大小？

Question

我想创建一个具有六个彩色条带的响应式或可调整大小的背景图案。我曾尝试使用具有多种颜色的 li，但我的问题是当 window 正在调整大小时我无法锁定我的 li。也就是说，条带没有填满整个 window 大小。我怎样才能做到这一点？

我的代码以片段的形式在下面提供。

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.topper {
  background-color: #ffffff;
  height: 200px;
  width: auto;
  top: 0;
  margin: 0 auto;
  padding: 0;
  display: block;
  position: relative;
  box-shadow: 3px 5px 40px 1px #000000;
  z-index: 1;
}
.bg {
  width: 100%;
  height: 100%;
  vertical-align: baseline;
  display: table-cell;
  min-width: 1366px;
  position: fixed;
  bottom: 0;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
}
ul > li {
  display: inline;
  float: left;
  bottom: 0;
  position: relative;
}
li > div {
  height: 900px;
  width: 214px;
  display: block;
}
.g {
  background-color: #4885ed;
}
.go {
  background-color: #db3236;
}
.goo {
  background-color: #f4c20d;
}
.goog {
  background-color: #4885ed;
}
.googl {
  background-color: #3cba54;
}
.google {
  background-color: #db3236;
}

<div class="topper">
</div>
<div class="bg">
  <ul>
    <li>
      <div class="g"></div>
    </li>
    <li>
      <div class="go"></div>
    </li>
    <li>
      <div class="goo"></div>
    </li>
    <li>
      <div class="goog"></div>
    </li>
    <li>
      <div class="googl"></div>
    </li>
    <li>
      <div class="google"></div>
    </li>
  </ul>
</div>

JSFiddle

Answer 1

通过使用 linear-gradient 作为背景而不是使用多个 li 元素，您可以仅使用一个元素来完成此操作。同样正如 jiff 指出的那样，你不应该在 li.

中使用 div 元素

通过将元素的大小设置为等于屏幕大小并使用百分比值作为色标，可以实现所需的效果。

使用以下逻辑创建渐变：

需要六个彩色条作为背景，因此每个彩色条只能占据元素背景的六分之一。也就是说，(100% / 6) 约为 16.66%。
第一种颜色应该从 0% 开始到 16.66% 结束（color-stop）所以应该写成如下：
```
<color> 0%, <color> 16.66%
```
(在代码片段中，<color> 0%没有写，因为假设第一种颜色从 0% 开始)
第二种颜色应该从第一个元素结束的地方开始，并且应该再占 16.66%。所以它应该从 16.66% 开始，到 33.33% 结束。这就是为什么它写成 #db3236 16.66%, #db3236 33.33%.
同样，第三种颜色从第二种颜色结束的地方开始，又占了 16.66%。所以它的开始是 33.33%，结束是 49.99%。以同样的方式，应该确定每种颜色的起点和终点，然后在 linear-gradient.

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.topper {
  background-color: #ffffff;
  height: 200px;
  width: auto;
  top: 0;
  margin: 0 auto;
  padding: 0;
  display: block;
  position: relative;
  box-shadow: 3px 5px 40px 1px #000000;
  z-index: 1;
}
.bg {
  width: 100%;
  height: 100%;
  position: fixed;
  bottom: 0;
  background: linear-gradient(to right, #4885ed 16.66%, #db3236 16.66%, #db3236 33.33%, #f4c20d 33.33%, #f4c20d 49.99%, #4885ed 49.99%, #4885ed 66.66%, #3cba54 66.66%, #3cba54 83.33%, #db3236 83.33%, #db3236 100%);
}

<div class="topper">
</div>

<div class="bg">
</div>

如何锁定 LI 标签中的 DIV 调整大小？

How to lock DIV in LI tag from resize?

html

css

linear-gradients