Iframe vs. div in absolute positioning

HTML & CSS
1

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>

However, a div stretches as expected.

2

It’s a replaced element like an image and you will need height:100% and width:100% to make it stretch.

1 Like
3

Thanks, Paul! :slight_smile:

4

Just to make sure: is it enough to use width and height only:

* {
  margin: 0;
  border: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  position: relative;
}
iframe {
  background: tan;
  position: absolute;
  width: 100%;
  height: 100%;
}
<iframe></iframe>

Or should I use top, bottom, right, and left as well?

5

Width and height should suffice as long as you have top and left.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.