Dynamic Height & Fixed Elements inside iFrame

Question

I'm trying to set the height of a 'panel', so it fills the full width & height of the device. Previously this was okay, but now the site is running through an iFrame, the height is MASSIVE.

I'm using this code:

var windowHeight = $(window).height();
$('.panel-adjust').height(windowHeight);

Because it's inside the iFrame, it seems it's generating a big height due to the iFrame (Possibly the height of ALL the panels)

How can I fix this so it gets the actual viewport height, not the height of the iFrame? Bearing in mind this needs to be dynamic. The iFrame is on another site so I don't have much flexability over it.

I'm also trying to position an element to the bottom of the viewport / window. Normally doing this works:

position:fixed;
bottom: 0;
left: 0;

But now it's inside an iFrame, the fixed element is at the very bottom of the website (Not the window)

Any ideas?

Answer 1

Getting the height & width of the viewport on the Parent page (with the iFrame) then passing it to the iFrame and collecting it worked for me. Like @passionateCoder stated.