如何设置 body 的最小高度

这是一个小问题，但却困扰我了一段时间。我的需求是当 body 标签内的内容高度小于浏览器可视区域的高度时，使其高度等于可视区域的高度，即高度不足时也要撑满可视区域。
google 了一下后，我得到了这样的解决方案：

html, body {
  height: 100%;
}

这解决了高度不足时的需求，但同时也带来了另一个问题，即 body 的高度被限死了，高度不足时，它可以撑满可视区域，但当 body 的内容高度超出可视区域时，它的高度却也不会随之增加。
很显然，我需要新的方案。于是，我想到了 min-height 属性，即最小高度。

html, body {
  min-height: 100%;
}

于是我把 html、body 的 min-height 设置为 100%，但很不幸，失败了。设置之后，html 的高度如愿以偿，body 却一如既往。
到了这一步，我很困惑。为什么 html 有了高度，body 却没有。于是我紧接着又尝试了一次。

html {
  min-height: 100%;
}
body {
  height: 100%;
}

再一次失败。
这一次我沉下心来，仔细思考了一下。我突然想到了 min-height 的百分比可能不是来源于父标签的 min-height，而是 height。于是我想到了解决办法。

html {
  height: 100%;
}
body {
  min-height: 100%;
}

最终的结果也证实了我的想法，html、body 标签的高度在高度不足时都撑满了可视区域，当内容高度超过可视区域时，它们也会被内容撑的更大。