关于html：iframe与div的绝对位置

Iframe vs. div in absolute positioning

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

1	<iframe></iframe>

但是，div会按预期延伸。

div是不可替换的元素。绝对放置时，其宽度由10.3.7绝对放置的，不可替换的元素中定义的CSS规则给出-特别是在您的情况下，宽度是在步骤5中确定的。

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

用于CSS中除width之外所有值均固定的地方，因此计算width以保持相等。

iframe被视为已替换元素。绝对定位时，其宽度由10.3.8绝对定位的替换元素定义的CSS规则给出，该元素将宽度计算推迟到10.3.2内联替换元素的规则的最后一行-即，iframe不会具有固有宽度，因此计算出的宽度通常为300px。这类似于img元素，该元素也不会扩展为使用相同的CSS规则填充页面。但是图像通常确实具有固有宽度，因此使用宽度而不是300px。

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

相关讨论

将width:100%;和height:100;赋予iframe。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

* {
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%;
}

1	<iframe></iframe>