Hi guys,

First post here
I'm looking for a solution to a problem I've been trying to fix for ages and I can't figure it out for the life of me.

I have a flexible design and I use the @media property to adapt the content to all devices, esp tablets and mobiles.

Problem is, I have to use iFrames to use some custom forms from Wufoo.com. As much as I hate frames, I'm legally required to use those so I don't have a choice.

So anyway my iFrames' content width is defined to 100%, and their height to the number of pixels of the actual page being framed. Everything works fine on desktop browsers.

The problem is that when people reduce the browser width or view the site from a mobile phone, the iframes are cut off at the bottom and a lot of the content is missing.
The height basically changes as you resize the width of the page.
Now I've tried to javascripts i found online and stuff, nothing works. I've defined the min-height: to the same number of pixels as the forms, that doesn't work. I've tried overflow:visible; and that doesn't work as well.
I think this just can't be fixed in CSS...

Do you guys know a fix for this?

Thanks in advance...