Menu
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)?
494
position: absolute; This will give the iframe a position relative to the wrapper and let it be positioned over the padding of the wrapper. top: 0 and left: 0 are used to position the iframe at the center of the container. width: 100% and height: 100% make the iframe take all of the wrapper's space.
An absolutely positioned element is an element whose computed position value is absolute or fixed . The top , right , bottom , and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.)
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.
189
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
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
