iframe 100% height issue

Question

In this issue here I want the iframe to occupy the whole blue box.

I have given width and height 100% but height has no effect. Any fix?

It's weird that a short answer will be converted to comment, even when there is no need for more explanation... — Per Salbark, Sep 07 '12 at 13:16
check this answer: http://stackoverflow.com/questions/5867985/iframe-auto-100-height — Xiaowei Song, Sep 20 '13 at 01:53
this one answers your question: http://stackoverflow.com/questions/5867985/iframe-auto-100-height [1]: http://stackoverflow.com/questions/5867985/iframe-auto-100-height — Xiaowei Song, Sep 20 '13 at 01:55
please check: http://stackoverflow.com/questions/5867985/iframe-auto-100-height — Xiaowei Song, Sep 20 '13 at 01:57

Alfred · Answer 1 · 2012-09-10T04:58:23.730

1

Change your display: table-row to display: block. Also notice that height percentage to fill a div will work only of the parent container has a fixed height, either by px or something else, or in percentage %. Here is the corrected fiddle.

Else you may try with your own layout. But add position: absolute;width:300px;height:250px; to your div #two. If you want to display some element using percentage, then it's parent container's attributes (width and height) should be defined, and only then, the child will stretch.

Here is the fiddle.

edited Sep 10 '12 at 04:58

answered Sep 07 '12 at 14:02

Alfred

21,058
61
167
249

The reason I have given `display:table-row` is that the blue box takes the rest of the portion. I have just added a fiddle in my question i.e. it is quite basic. In my project the height of `wrapper` is equal to the browsers height and height of blue box is equal to browser's height minus `50px`. Now, remember browser can resize so the height of blue is also going to change. – Ashwin Sep 07 '12 at 18:53

score 0 · Answer 2 · answered Sep 07 '12 at 13:10

0

Give <div id="two"> a height:100% in css. The iframe needs to fill the parent element but without a height set it wont.

answered Sep 07 '12 at 13:10

luke2012

1,724
1
13
20

That's the only solution I come around. But it is working only in firefox. Did you checked in chrome? `id="two"` is taking up 100% height. – Ashwin Sep 07 '12 at 13:57

score 0 · Answer 3 · answered Sep 07 '12 at 13:10

0

I've changed your code slightly in this fiddle. Basically your blue box div needed a height value. Here's the fiddle

answered Sep 07 '12 at 13:10

ThunderCat

68
6

Its dynamic, it can be any so I can't pre-set it. That's the reason I used table layout ;) – Ashwin Sep 07 '12 at 18:39

Deep Frozen · Answer 4 · 2012-09-07T14:03:51.753

0

You could make the blue div position: relative and use the following css for the iframe:

iframe {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
}

#two {
    position: relative;
    /* other CSS for #two */ 
}

fiddle

edited Sep 07 '12 at 14:03

answered Sep 07 '12 at 13:14

Deep Frozen

2,053
2
25
42

Your solution puts the iframe absolute to body. So it is not working. – Ashwin Sep 07 '12 at 13:55
@MotaBOS if you set the div where the `iframe` is in to `position: relative` it will set it absolute to that div. so that would be: `#two { position: relative; }`. I'll update my answer to make it more clear. – Deep Frozen Sep 07 '12 at 14:02

iframe 100% height issue

4 Answers4

Linked