1

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

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

现在我们知道，为了给“孩子”设置一个高度，我们还必须在“父母”上设置一些高度值。否则，单独对“孩子”设置任何高度值都不会产生影响。

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

这会将“孩子”的高度设置为 200 像素的 75%。如果我们删除“父”的高度，“子”将不会设置任何高度。

现在，我发现不是设置高度，而是如果我们将“父”的定位设置为绝对，我们可以不设置任何高度就可以离开，并且“子”的高度值仍然有效：

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

我想知道这是一种标准行为还是偶然发生的事情。另外，如果它是标准的，这是否意味着给元素一个布局（通过设置它的位置）隐含地赋予它一些高度值？

4

2 回答 2

5

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

这不仅是一种常用的技巧，而且也是一种标准行为。血淋淋的细节在规范中；关键在于这个等式：

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

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom ' = 包含块的高度

（这是用于计算高度的；还有一个相应的计算宽度的公式，可以在这里找到。）

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

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

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

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

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

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

另请注意，“生成框的包含块的高度”不是指该height块的指定值或计算值，而是使用的值，即计算呈现在屏幕上的高度。这可能是您困惑的根源，为什么您可以在不设置height父元素的情况下逃脱，但浏览器仍然知道如何根据一些隐式高度计算子元素的高度。

于 2012-10-26T07:50:52.223 回答
0

当然，是的。这是标准行为。

始终为元素设置top: 0;and时，意味着将 设置为父值。例如，考虑一个带有 的元素，如果您有一个带有and的子元素，则该子元素也将是bottom: 0;absoluteheightheightrelativeheight: 400px;absolutetop: 0;bottom: 0;height: 400px;

<div style='position: relative;height: 400px'>
    <div style='position: absolute;bottom: 0;top:0;'>
        ...
    </div>
</div>
于 2012-10-26T07:47:39.937 回答