14

My question is similar to IFRAME and conflicting absolute positions, but I specifically want to know WHY you can't set both the left/right or top/bottom in an iframe and get it to work.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
iframe { position: absolute; display: block; top: 0; bottom: 0; left: 10px; width:100px;   border: 1px solid black;}
div { position: absolute; display: block; top: 0; bottom: 0; left: 200px; width:100px;  border: 1px solid black;}
</style>
</head>
<body>
<iframe></iframe>
<div></div>
</body>
</html>

The div takes up the full browser height. The iframe is 150px tall. It's the same in Chrome 17, Firefox 11, and IE9. Clearly this isn't a browser quirk. There's something in the HTML5 spec that says you can't set both left/right or top/bottom on an iframe in order to set the height.

What is special about iframes (vs. divs)?

Community
  • 1
  • 1
mhenry1384
  • 7,538
  • 5
  • 55
  • 74

2 Answers2

23

It just will not work out. It is the way the iFrame is made.

If you still want to reach the same solution, then you use a div as wrapper with absolute position, your top, left, right, bottom. Put in that div your iFrame width width:100% and height:100%.

Problem solved.

Sven Bieder
  • 5,515
  • 2
  • 21
  • 27
  • 2
    This doesn't answer the question, OP wasn't seeking a solution to the problem, rather an explanation as to why an iframe can't be positioned absolutely. – Decade Moon Jan 31 '18 at 01:29
20

Iframes are "replaced elements".

These are treated differently than non-replaced elements. Without going into the details, just look at the spec's table of contents: http://www.w3.org/TR/CSS21/visudet.html

10.3 Calculating widths and margins
10.3.1 Inline, non-replaced elements
10.3.2 Inline, replaced elements
10.3.3 Block-level, non-replaced elements in normal flow
10.3.4 Block-level, replaced elements in normal flow
10.3.5 Floating, non-replaced elements
10.3.6 Floating, replaced elements
10.3.7 Absolutely positioned, non-replaced elements // div
10.3.8 Absolutely positioned, replaced elements // iframe
10.3.9 'Inline-block', non-replaced elements in normal flow
10.3.10 'Inline-block', replaced elements in normal flow

user123444555621
  • 148,182
  • 27
  • 114
  • 126