How to make an iframe fill an area defined by distance from edges?

Question

I have an iframe which I want to fill all of an area on the page specified by the bottom, right, left, and top css styles. However, when I do the method I would expect to work, it does not:

HTML:

<iframe id="example_frame" src="http://example.com"&gt;&lt;/iframe&gt; CSS:

#example_frame {
  position: absolute;
  top: 1em;
  left: 1em;
  right: 1em;
  bottom: 1em;
}

This results in a little box with the web page about 100x100 pixels

Answer 1

I don't know for sure, but don't you have to define the iframe as position: absolute to be able to set a size in terms of the browser window;? I'd imagine it's display:block by default?

---

Edited in response to comment from OP.

What doctype are you using? Does the problem occur in all browsers/platforms you can test on? Are you successfully calling the stylesheet? Are you using inline styles, styles in the head or an external sheet?

If you're not using inline-styles, try using them, just for a moment, to see if they work inline, or not.

Answer 2

Absolute positioning works with one x and one y coordinate at a time. I'm guessing the browser is ignoring one set of your coordinates.

Also, since you haven't specified a with or a height for the iframe, it is defaulting to 100 x 100.

Try something like:

#example_frame {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
}