Iframe vs div in absolute positioning

Question

I wonder why the following iframe does not 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> 

However, a div stretched as expected.

Answer 1

A div is an element without replacement . When you fully position it, its width is determined by the CSS rules defined in 10.3.7 Absolutely positioned, not replaced elements - especially 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 '= width of containing block

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

iframe is considered a replaced element . When you completely position it, its width is determined by the CSS rules defined in 10.3.8 Absolutely positioned, replaced elements that throw the width calculation to the last line of rules for 10.3.2 Inline, replaced elements - that is, an iframe has no internal width, so it width is calculated as usual 300 pixels. This is similar to the img element, which will also not expand to fill the page with the same CSS rules. But images usually have an internal width, so the width is used, not 300 pixels.

Similar rules apply for calculating heights.

Answer 2

Give width:100%; and height:100; to 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>