Iframe vs. div in absolute positioning

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>

Answers


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' = 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.

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.


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>

Need Your Help

insert or ignore multiple documents in mongoDB

mongodb pymongo mongodb-query

I have a collection in which all of my documents have at least these 2 fields, say name and url (where url is unique so I set up a unique index on it). Now if I try to insert a document with a dup...

Referencing Resource Dictionaries in a separate project

silverlight silverlight-5.0 resourcedictionary

I've recently split my silverlight application into several smaller projects.