CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
toad
toad

Reputation: 420

Fetch current height of iFrame and applying that height to parent div

I have an iFrame inside of a div. I need the position on the iFrame to be absolute (it's a really long story). When the position is absolute, the content lays over the content below it. How can I fetch the current height of the iFrame and set that number as the height of the parent div in order to push the other content down, creating the illusion that the iFrame content in no longer laying on top of the rest?

Have done a bunch of research and tried so many things in js. Please help and if you're feeling nice, please give me some good rep :)

Thanks.

<div <style="height:[want this to be height of iframe after loading content]">
<iframe src="mydoc.html" style="position:absolute"></iframe>
</div>
<div>Other content that is now displaying under iFrame content</div>

Upvotes: 0

Views: 95

Answers (1)

Christopher Marshall
Christopher Marshall

Reputation: 10736

$(document).ready(function() {
   var iframeHeight = $('iframe').height();
   $('div').css('height', iframeHeight);
});

It would be trivial to do this in vanilla js if you had selectors on your elements.

Upvotes: 1

Related Questions