CODEWITHSUNDEEP
htmlcssiframeresponsive-design
Kloar
Kloar

Reputation: 1160

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

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?

Upvotes: 3

Views: 3562

Answers (2)

Salman Arshad
Salman Arshad

Reputation: 272116

The height: 100%; means match the height of element with the height of its parent i.e. 0px. You can use relative + absolute positioning to achieve the desired result i.e. match the height with the height of the element plus padding:

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

Demo here

Note: for pixel perfect results you might need to zero-out the marginwidth, marginheight and frameborder attributes on the iframe.

Upvotes: 4

haxxxton
haxxxton

Reputation: 6442

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

Upvotes: 9

Related Questions