CODEWITHSUNDEEP
htmlcss
tmuecksch
tmuecksch

Reputation: 6642

Iframe embedded with 100% height in a div has strange bottom-margin

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.

Upvotes: 18

Views: 10251

Answers (4)

Rameez
Rameez

Reputation: 1712

iframe { vertical-align:bottom; }

or

iframe { display:block; }

Upvotes: 3

C3roe
C3roe

Reputation: 96316

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.)

Upvotes: 35

Dragos Sandu
Dragos Sandu

Reputation: 664

In my opinion it is best to use the new attribute seamless from HTML5. You can read more about this and other new attributes here. So, your code will look like this: <iframe src="" class="" seamless="seamless" style="border: none; background: blue;" height="100%" width="100%"></iframe>. Unfortunately, a pretty big problem is browser support for this attribute. However, browsers updated in 2013 should function. Let me now if that works! I test it in Opera 15.0 and Chrome 29 and it works.

Upvotes: 0

Graham Walters
Graham Walters

Reputation: 2064

The reason being overflow:auto allows the div to scroll if the inner content does not fit, and with 100% height it's causing the two styles to in a way conflict. If they didn't in theory the iframe could continue to expand.

Changing overflow:auto to overflow:hidden or even removing overflow would fix this problem

Upvotes: 0

Related Questions