css height百分比无效,CSS - 为什么百分比高度不起作用？ [重复]

height 属性中的百分比值有一点复杂性， width 和 height 属性实际上彼此表现不同 . Let me take you on a tour through the specs.

height属性：

百分比是根据生成的框的包含块的高度计算的 . 如果未明确指定包含块的高度(即，它取决于内容高度)，并且此元素未绝对定位，则该值计算为“auto” . 根元素的百分比高度相对于初始包含块 . 注意：对于其包含块基于块级元素的绝对定位元素，百分比是根据该元素的填充框的高度计算的 .

好吧，让我们一步一步地分开：

百分比是根据生成的框的包含块的高度计算的 .

什么是containing block？它有点复杂，但对于默认 static 位置的普通元素，它是：

最近的块容器祖先盒子

或英文，其父框 . (非常值得知道 fixed 和 absolute 位置会是什么，但我忽略了这一点，以保持这个答案的简短 . )

所以请看这两个例子：

在此示例中， #aa 的包含块是 #a ，依此类推 #b 和 #bb . 到现在为止还挺好 .

height 规范的下一句是我在这个答案的引言中提到的复杂性：

如果未明确指定包含块的高度(即，它取决于内容高度)，并且此元素未绝对定位，则该值将计算为“auto” .

啊哈！是否明确指定了包含块的高度！

在 #aa 的情况下，_179859_的

50％是100px

但 height:auto 的50％是 auto ，在 #bb 的情况下是0px，因为没有 auto 的内容扩展到

正如规范所说，包含块是否已经绝对定位也很重要，但让我们继续 width .

width属性：

那么 width 的工作方式是否相同？我们来看看the spec：

百分比是根据生成的框的包含块的宽度计算的 .

看一下这些熟悉的例子，从前面的调整来改变 width 而不是 height ：

在 #cc 的情况下，_179872_的

50％是100px

_179874_的50％是 width:auto 最终的50％，与 height 不同，没有特殊的规则可以区别对待这种情况 .

现在，这里是棘手的一点： auto 意味着不同的东西，部分取决于它是否被指定为 width 或 height ！对于 height ，它只是意味着适合内容*所需的高度，但对于 width ， auto 实际上更复杂 . 您可以从代码片段中看到，在这种情况下，它最终成为视口的宽度 .

宽度取决于其他属性的值 . 请参阅以下部分 .

Wahey，'s not helpful. To save you the trouble, I'已经找到了我们用例的相关部分， Headers 为"calculating widths and margins"，副 Headers 为"block-level, non-replaced elements in normal flow"：

以下约束必须包含在其他属性的使用值中：'margin-left''border-left-width''padding-left''width''padding-right''border-right-width''margin- right'=包含块的宽度

好的，所以 width 加上相关的边距，边框和填充边框都必须加起来包含块的宽度(而不是后半部分 height 的工作方式) . 再说一句规则：

如果'width'设置为'auto'，则任何其他'auto'值变为'0'，并且'width'跟随得到的相等 .

啊哈！所以在这种情况下， width:auto 的50％是视口的50％ . 希望现在一切都有意义！

脚注

*至少，在这种情况下，重要的是 . 规范好吧，现在一切都有道理 .