iframe has zero height inside parent with no height and bottom padding

css, html, iframe, responsive-design

Solution

What you'll need to do is position your `iframe` using `position:absolute;` with `position:relative;` on your `.wrapper`

.wrapper {
    position:relative;
    height: 0;
    width: 100%;
    padding-bottom: 56.25%;
}
.frame {
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    width: 100%;
    height: 100%;
}

Have a look at this DEMO

FURTHER:

If you plan on doing something like this regularly throughout your document I would suggest adding an internal `div` that does this same function and leave your `iframe` without the absolute positioning

HTML

<div class="wrapper">
    <div class="abs-inner">
        <iframe border="0" scrolling="no" class="frame" src="http://images.fineartamerica.com/images-medium-large/7-abstract-background-les-cunliffe.jpg"></iframe>
    </div>
</div>

CSS

.wrapper {
    position:relative;
    height: 0;
    width: 100%;
    padding-bottom: 56.25%;
}
.abs-inner{
    position:absolue;
    top:0;
    right:0;
    left:0;
    bottom:0;
}
.frame {
    width: 100%;
    height: 100%;
}

Something like this DEMO

Problem

I'm using the classic responsive design trick of applying a percentage based `padding-bottom` and zero height to an element in order to make it maintain a certain aspect ratio. Inside this element is an iframe with a height of 100%. This works an intended in chrome, but firefox and IE doesn't show the iframe, as if it would have no height. I have tried applying `box-sizing: content-box` as a workaround for IE, but it did nothing. Fiddle: http://jsfiddle.net/jgsnK/ How can I make the iframe behave like in chrome in the other browsers?

Original source