当min-height:100%时,为什么HTML和BODY不占用文档的所有可用高度？

Question

我一直在努力理解这种情况

我在CSS中设置了

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

因此,当页面上没有内容时,html和body占据页面高度的100%.如果体内有内容,则应根据内容高度改变其高度.

但是当我在页面上添加一些内容(足以显示滚动条)时,html和body不会占用文档的100%高度.即如果我的屏幕高度为700px,则无论哪种情况$('body').height()都会返回700px;

这是为什么？

编辑:换句话说,我希望我的身体标签至少是屏幕的100%,但如果添加内容,它应该会增长.

Answer 1

我一开始误解了这个问题,但第二个想到我会把它解释为:

该html元素忽略min-height: 100%.

这是为什么？

"为什么"的答案在相关规范中,强调我的:

最小高度

...

值: <length> | <percentage> | inherit

...

<percentage>
指定用于确定已使用值的百分比.百分比是根据生成的框的包含块的高度计算的.如果未明确指定包含块的高度(即,它取决于内容高度),并且此元素未绝对定位,则百分比值将被视为 "0"(对于"min-height")或"none" ('max-height').

这就是为什么你需要为html元素设置一个高度min-height来处理body元素的原因.或者你可以绝对定位html元素,如下所示:

html { border: 10px solid black }
body { border: 10px dashed red }

html { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }    
/* alternatively: html { min-height: 100%; height: 100%; } */    

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

见的position: absolute演示或对height: 100%演示.

感谢@Alohci纠正我对规范的解释.