我正在尝试让一些 div 展开以填满屏幕，但我很吃力。我已经在 this jsfiddle 上分解了这个问题.
我真正想知道的是，为什么 div 的 100% min-height 在其父项时没有扩展到该高度(或根本没有)具有相同的属性并扩展？
<body>
<div>
stuff
</div>
</body>
body {
min-height: 100%;
background: red;
}
div {
min-height: 100%;
background: grey;
}
最佳答案
CSS 2.1 spec 中涵盖了该问题:
<percentage>
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block. Note: For absolutely positioned elements whose containing block is based on a block-level element, the percentage is calculated with respect to the height of the padding box of that element. This is a change from CSS1, where the percentage was always calculated with respect to the content box of the parent element.
因此，澄清一下，百分比高度将引用其包含 block 的高度(除非它是 position: absolute 或 position: fixed)。如果该包含 block 没有指定的高度，则百分比将引用 auto，它实际上不会做太多事情。
position: absolute 将引用的包含 block 更改为最近的位置(absolute、relative 或 fixed ) 元素。
position: fixed 将引用的包含 block 更改为视口(viewport)。
因此，如果您在包含 block 上指定了一个高度，在包含 block 上指定了一个非静态的位置，或者不介意使用视口(viewport)作为包含 block ，那么您可以有效地使用百分比高度。
关于html - 为什么 100% 不代表 100% 高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7880365/