CSS：百分比最小高度元素嵌套在百分比最小高度元素中

我想让 html、body 和wrapper 元素的最小高度都为 100%，以便覆盖整个查看窗口，但我发现我只能使 html 遵守此声明。

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

html {
        border: 2px red solid;
        }

body{
        border: 2px blue solid;
        }

#wrapper {
        border: 2px pink dotted;
        }

创建一个仅包含 #wrapper div 的简单 html 文档，其中可以包含内容也可以不包含内容。如果使用像素的最小高度，元素就会遵守它，但是当我使用百分比时，只有 html 可以工作。为什么是这样？

Use height代替min-height.

body,html{
    height: 100%;
}
#wrapper {
    height: 100%;
}