Menu
I want to wrap an iframe element with height 100% and width 100% into a div with fixed size.
I tried it like this:
<div style="height: 410px; width: 480px; border: 1px solid black; overflow: auto;">
<iframe src="" style="border: none; background: blue;" height="100%" width="100%"></iframe>
</div>
With older doctypes it works perfectly, but as soon as I add the HTML5 doctype <!DOCTYPE html> there is a disturbing scrollbar which makes it possible to move the whole iframe element up and down inside the surrounding div and if you scroll completely down there is a strange space, I can't explain.
When I remove the overflow: auto; property from the div-style it works too, but this can't be the solution.
The thing I don't understand is why there is this strange space/margin below the iframe element?
Here is a demo you can try yourself: http://jsfiddle.net/tmuecksch/b5jgn/
I tried it in Safari 7.0 and Firefox 23.0.1.
856
Edit the width attribute. You should see the attribute "width=" after the URL in the iframe tag. Edit the width in pixels in quotations (" ") after the "width=" attribute. For example, if you want the width to be 300 pixels, you would enter "width="300px"" after the URL in the tag.
HTML | <iframe> marginwidth Attribute The HTML <iframe> margin width Attribute is used to specifies the left and right margin of the content in an Iframe Element. Attribute Values: pixels: It contains the value i.e pixel which specifies the right and left a margin of the content in an Iframe Element.
By using an <iframe> within a <div> , it is possible to include external web content in most any web document. This method serves as an excellent alternative to actual frames, which are not as flexible and definitely not as popular.
Add display:block for your iframe element – without that, it is rendered as an inline box, and therefor space is left for the under-lengths of glyphs like g, p, f etc. of (hypothetical) text that might be displayed on the same line.
See fiddle: http://jsfiddle.net/b5jgn/2/
(vertical-align:bottom for the iframe would also work.)
79
iframe { vertical-align:bottom; }
or
iframe { display:block; }
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
