当内容溢出时，CSS min-height 100％不适用

Question

我有以下css可以在页面重新调整大小时动态地将背景覆盖在屏幕的100％处。

html { 
     height: 100%;
}

body {
    background-image: url("image.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100%;
}

工作正常，直到动态内容溢出，背景不会随着添加的内容而增加，所以我在页面底部留下了空格。

艺术家的印象： - 正常尺寸的浏览器

- 调整大小的浏览器

任何关于我做错了什么的建议，或者当内容因内容或浏览器大小而导致内容溢出时，我需要做些什么来使其填满屏幕？

Answer 1

1）从html选择器

中删除规则：height: 100%;

2）添加background-attachment: fixed;

<强> DEMO

body {
  background-image: url("http://lorempixel.com/g/1000/1000");
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100%;
  background-attachment: fixed;
}
ul {
  list-style: none;
}
li {
  width: 200px;
  height: 200px;
  border: 1px solid green;
  display: inline-block;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>