HTML 和 BODY 是静态的，哪个是我的 DIV 最接近的祖先？答案

【问题标题】：HTML and BODY are static, which is my DIV's closest positioned ancestor?HTML 和 BODY 是静态的，哪个是我的 DIV 最接近的祖先？
【发布时间】：2016-02-10 23:32:15
【问题描述】：

我有这个简单的 HTML5 文档：

<!doctype html>
<html>
  <head>
    <style type="text/css">
      body { margin: 0; padding: 0; }
      .parent1 { height: 50px; background: #00ff00; }
      .parent1 > .child1 { height: 50%; width: 100%; background: #ffcc00; }
      .parent2 { position: absolute; width: 100%; height: 25%; background: #ff0000; }
    </style>
  </head>
  <body>
    <div class="parent1">
      <div class="child1">I'm 25px height (50% of 50px)</div>
    </div>
    <div class="parent2">I'm absolute positioned. My ancestors, body and html, are static... Where I'm getting the 25% from?</div>
  </body>
</html>

html 和 body 没有定义高度，所以它们使用默认值 auto（这意味着它们的高度就是内容的高度）。它们没有定位，所以它们是静态的。

div.parent1 高度为 50 像素。

div.parent1 有一个高度为 50% 的子元素。

div.parent2 绝对定位，高度为 25%。

如果我没记错的话，使用百分比设置的高度只有在它的父级定义了高度时才有效（div.child1就是这种情况）。

因为 div.parent2 是绝对的，所以它的高度是不计算的，所以 body 和 html 的高度都是 50px。这很清楚，但我不明白为什么 div.parent2 25% 的高度有效……它从哪里来的？它的祖先 body 和 html 是静态的……窗口？视口？

JSFiddle

【问题讨论】：

Why does percentage width work even if no explicit width value given for containing block?的可能重复
类似的问题也可以在这里找到：CSS – why doesn’t percentage height work?

标签： html css

【解决方案1】：

让我们看看 w3 对绝对定位元素的看法：

它们定义了一个新的矩形平面，其中的内容是就像<BODY> 元素内的 HTML 流入默认容器。

所以听起来body 元素本身代表一个默认容器，不管它是静态的。

取自w3.org。

或者来自w3 wiki的更好解释。

如果一个绝对定位的元素没有定位的祖先，那么包含块是所谓的“初始包含块”，这实际上等同于 html 元素。如果你是在屏幕上查看网页，这意味着浏览器窗口；如果您正在打印页面，这意味着页面边界。

【讨论】：

谢谢，w3 wiki 好多了！
不，最初的包含块不等同于 html 元素，它是 html 元素的容器。初始包含块是视口的高度。 html 元素的高度是它的指定高度，或者如果是 auto，就是它的内容的高度。

【解决方案2】：

html 是块级元素，它位于初始包含块中。

初始包含块是一个矩形框，它采用视口的宽度。因此html 元素的宽度将等于视口的宽度。

另一方面，body 元素的包含块是由html 生成的。因此它们也将具有相同的宽度。

body 本身为其块级子项建立了一个包含块。这就是为什么正常流中的div 元素会占据视口的宽度。

见https://stackoverflow.com/a/28354270/2543240

【讨论】：

【解决方案3】：

html'元素'在没有定位的祖先的情况下。

对于绝对定位的元素，left、right 和 width 属性的百分比值是相对于包含块的宽度的。 top、bottom 和 height 属性的百分比值是相对于包含块的高度的。

在这种情况下，containing block 是 html 元素，

主体没有高度，因为元素不在流中。

html {
  background: green;
}
body {
  margin: 0;
  padding: 0;
  background: lightblue;
}
.parent2 {
  position: absolute;
  width: 100%;
  height: 25%;
  background: #ff0000;
}

&lt;div class="parent2"&gt;I'm absolute positioned. My ancestors, body and html, are static... Where I'm getting the 25% from?&lt;/div&gt;

【讨论】：

而 html 从视口获取宽度/高度？
太好了，这就是我想要的。也许您应该将有关视口的信息添加到答案中
其他人已经报道了……我不想抢走他们的风头。
不是 html 元素。见jsfiddle.net/kp3e4mgr。 html 元素是黄色框。初始包含块是 html 元素的容器。

【解决方案4】：

您的 HTML 使用 px 是静态的。百分比是在浏览器页面 height - width

上计算的

【讨论】：

应该是width，而不是weight。