根据绝对位置的父项在子元素上设置“高度”

Question

我有一个父元素，我想在父元素中设置元素的高度。 例如：

<div id="parent">
    <p id="child"></p>
</div>

现在我们知道，为了为“子代”设置高度，我们还必须在“父代”上设置一些高度值。 否则，单独对“子级”设置任何高度值都将无效。

#parent { height: 200px; }
#child { height: 75%; }

这会将“子级”的高度设置为200px的75％。 如果我们删除“父级”的高度，则“子级”将不会设置任何高度。

现在，我发现，如果不将高度设置为绝对值，而是将“父级”的位置设置为绝对值，则无需设置任何高度就可以逃脱，“子级”上的高度值仍然可以使用：

#parent { position: absolute; top: 0; bottom: 0; }
#child { height: 75%; }

我想知道的是这是标准行为还是偶然性的工作。 另外，如果它是标准的，这是否意味着给元素一个布局（通过设置其位置）会隐式地给它一些高度值？

Answer 1

基本思想是：对于绝对定位的元素，如果将相对两侧（例如， left和right或top和bottom ）的偏移量设置为零，则元素将分别拉伸到其包含块的宽度或高度。

这不仅是常用技巧，而且还是标准行为。 血淋淋的细节是这里的规范; 关键在于以下等式：

对于绝对定位的元素，使用的垂直尺寸值必须满足以下约束：

'top'+'margin-top'+'border-top-width'+'padding-top'+'height'+'padding-bottom'+'border-bottom-width'+'margin-bottom'+'bottom '=容纳块的高度

（这是用于计算高度；还有一个用于计算宽度的相应方程式，可在此处找到。）

因此，假设所有其他值均为默认值，这意味着

0 + 0 + 0 + 0 +'高度'+ 0 + 0 + 0 + 0 =包含块的高度

祖先都是静态的绝对定位元素的包含块始终是视口（或初始包含块 ），它通常与浏览器的查看区域（或例如jsFiddle中的Results iframe）的高度相同。 这将产生我刚刚描述的效果。

因为您没有为父元素指定显式的高度，所以这为它提供了一个隐式的高度，用于以百分比形式计算子元素的高度：

相对于生成的盒子的包含块的高度计算百分比。

实际上，即使将top和/或bottom为某个非零值，这些框也会根据上述等式进行缩放。

还要注意，“生成的框的包含块的高度”不是指该块的height的指定值或计算值，而是指所使用的值，即在屏幕上呈现的计算所得的高度。 这可能是您对为什么不设置父元素的height而逃脱的困惑的根源，但是浏览器仍然知道如何基于某个隐式高度来计算子元素的高度。

Answer 2

当然可以 这是标准行为。

始终在设置top: 0; 和bottom: 0; 对于absolute元素，这意味着将height设置为父height值。 例如，考虑一个height: 400px;的relative元素height: 400px; ，如果您的absolute子元素的top: 0; 和bottom: 0; ，子元素的height: 400px;也将为height: 400px;

<div style='position: relative;height: 400px'>
    <div style='position: absolute;bottom: 0;top:0;'>
        ...
    </div>
</div>