为什么100％不是100％的身高？

小编典典

为什么100％不是100％的身高？

css

我正在尝试divs扩展一些以填充屏幕，但是我很挣扎。我已经解决了这个jsfiddle的问题。

我真正想知道的是div，min-height当其父项具有相同的属性并且会扩展时，为什么100％的不会扩展到那个高度（或根本不扩展）？

<body>
    <div>
        stuff
    </div>
</body>

body {
    min-height: 100%;
    background: red;
}
div {
    min-height: 100%;
    background: grey;
}

阅读 265

2020-05-16

共1个答案

小编典典

CSS 2.1规范涵盖了该问题：

< 百分比>

指定百分比高度。相对于生成的盒子的包含块的高度计算百分比。如果未明确指定包含块的高度（即，它取决于内容的高度），并且该元素的位置不是绝对的，则该值将计算为“自动”。根元素上的百分比高度是相对于初始包含块的高度。注意：对于绝对定位的元素（其包含的块基于块级元素），百分比是相对于该元素的填充框的高度计算的。这是CSS1的更改，在CSS1中，始终相对于父元素的内容框计算百分比。

因此，为了澄清起见，百分比高度将引用其包含块的高度（除非它是position: absolute或position: fixed）。如果该包含块的高度没有指定，则百分比将指auto，实际上不会做太多。

position: absolute引用包含块改变到位于最近的（absolute，relative，或fixed）元素。

position: fixed 将引用的包含块更改为视口。

因此，如果在包含块上指定高度，在包含块上指定静态以外的位置，或者不介意将视口用作包含块，则可以有效地使用百分比高度。

2020-05-16