Can't set the frame height to 100% in Firefox and IE

[admin]

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:
<a href="http://yysource.com/2011/08/source-code-iframe-with-100-height/" rel="nofollow">http://yysource.com/2011/08/source-code-iframe-with-100-height/</a>

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:
<a href="http://motushealth.com/mytip/" rel="nofollow">http://motushealth.com/mytip/</a>

Thanks,
Ahmar.

Note: I have also tried

postion:fixed

in CSS.