0

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?

Jason Mayo
  • 356
  • 1
  • 3
  • 23
  • Hey! Your problem might be a Lil tough to handle, I advise u read this http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content/362564#362564 – krishwader May 29 '13 at 13:50
  • @passionateCoder Just had a quick read. So are they in theory passing getting the height of the viewport from the parent, then passing it to the iFrame content? – Jason Mayo May 29 '13 at 14:21
  • Yeah.. I guess that's the gist – krishwader May 29 '13 at 15:07

1 Answers1

0

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.

Jason Mayo
  • 356
  • 1
  • 3
  • 23