Question

我想知道为什么以下iframe无法覆盖整个页面：

* {
  margin: 0;
  border: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  position: relative;
}
iframe {
  display: block;
  background: tan;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<iframe></iframe>

但是，div按预期延伸。

Answer 1

div是未替换的元素。当你绝对定位它时，它的宽度由10.3.7 Absolutely positioned, non-replaced elements中定义的CSS规则给出 - 特别是在你的情况下，宽度在步骤5中确定。基本上是等式

'left'+'margin-left'+'border-left-width'+'padding-left'+ 'width'+'padding-right'+'border-right-width'+'margin-right'+ 'right'=包含块的宽度

用于CSS中除了width之外的所有值都是固定的，因此计算宽度以保持相等。

iframe被视为已替换元素。当你绝对定位它时，它的宽度由10.3.8 Absolutely positioned, replaced elements中定义的CSS规则给出，它将宽度计算推迟到10.3.2 Inline, replaced elements规则的最后一行 - 即iframe没有固有宽度，所以它的宽度通常计算为300px。这类似于img元素，它也不会扩展以使用相同的CSS规则填充页面。但是图像通常具有固有宽度，因此使用宽度而不是300px。

类似的规则适用于高度计算。

Answer 2

将width:100%;和height:100;提供给iframe。

* {
  margin: 0;
  border: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  position: relative;
}
iframe {
  display: block;
  background: tan;
  /* position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; */
  width:100%;
  height:100%;
}

<iframe></iframe>

iframe与div的绝对定位

2 个答案: