Question

This should have been a simple thing to sort but even after extensive research on the Internet for 3 hours I am unable to find a solution. Here is my problem:
I am using WordPress as CMS. (I don’t think it really matters in my case anyhow).
I want to use an iframe inside a wordpress page. Okay.
The height of the frame is set to 100% in both CSS and in

This works like charm on Chrome but the frame shows scroll bars in firefox and IE and is only about 250 px in height. I searched on this forum and most people here and on Internet propsoed this solution:

html, body,iframe { margin:0; padding:0; height:100%; min-height: 100% }

Also for the iframe:

.forms
{
width:100%;
min-height:100% !important;
display:block;}

This didn’t work. So I tried other things as well: such as overflow:hidden (This doesn’t display the whole frame). I also tried using Jquery resize function on iframe. That didn’t work either. I also tried JS solution posted here:
http://yysource.com/2011/08/source-code-iframe-with-100-height/

But that didn’t work either. So now I am exhausted and posting my problem here hoping that someone here can help me please. Here is my page using iframe:
http://motushealth.com/mytip/

Thanks,
Ahmar.

Note: I have also tried postion:fixed in CSS.

Answer 1

i tried two things. First

html, body, iframe {
height: 100%; // remove this line
margin: 0;
min-height: 100%;
padding:0;}

second,

<iframe height="450" frameborder="0" class="forms" onload="resize_iframe()" id="glu" style="border:0px;" src="/form1.html">

i changed the height from 900 to 450.