Iframe和div在绝对定位 [英] Iframe vs. div in absolute positioning

问题描述

我不知道为什么下面的 iframe 不能覆盖整个页面：

I wonder why the following iframe doesn't stretch to cover the whole page:

* {
  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>

但是， / code>如预期延伸。

However, a div stretches as expected.

推荐答案

div是未替换元素。当您绝对定位时，其宽度由 10.3.7绝对定位，非替换元素 - 具体来说，在您的情况下，宽度在步骤5中确定。基本上方程

A div is a non-replaced element. When you absolutely position it, its width is given by the CSS rules defined in 10.3.7 Absolutely positioned, non-replaced elements - specifically in your case, the width is determined in step 5. Essentially the equation

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

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block

是固定的除了宽度，因此计算宽度以使等式成立。

is used where in your CSS all the values are fixed except width, so width is computed to make the equality hold.

iframe被认为是替换元素。当您绝对定位时，其宽度由 10.3中定义的CSS规则给出.8绝对定位，替换元素，它将宽度计算推迟到 10.3.2内联，替换元素 - 即iframe没有内部宽度，因此其宽度计算通常为300px。这类似于img元素，它也不会扩展到用相同的CSS规则填充页面。但图片通常有固有宽度，因此使用宽度而不是300像素。

An iframe is considered a replaced element. When you absolutely position it, its width is given by the CSS rules defined in 10.3.8 Absolutely positioned, replaced elements which defers the width calculation to the last line of the rules for 10.3.2 Inline, replaced elements - i.e. the iframe does not have an intrinsic width, so its width is computed to be typically 300px. This is similar to the img element, which also won't expand to fill the page with the same CSS rules. But images normally do have an intrinsic width, so that width is used rather than 300px.

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

Similar rules apply for the height calculation.

这篇关于Iframe和div在绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！