CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user598200
user598200

Reputation: 315

$('#iframe').height is not working

I want the iFrame to take up 80% height and advertisement to have the remaining 20%.

Code

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <iframe id="iframe" src="xxxxxx" style="border:0; width:100%;"></iframe>  
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- Text/image -->
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="xxxxxx"
         data-ad-slot="xxxxxx"
         data-ad-format="auto"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    $(window).load(function() {
        $('#iframe').height('80%');
    });     

    $(window).resize(function() {
        $('#iframe').height('80%');
    });        
    </script>
  </body>
</html>

Screenshot

enter image description here

Why doesn't it work?

Upvotes: 0

Views: 488

Answers (1)

Alex Howes
Alex Howes

Reputation: 454

Normally the height of elements depend on the height of the content inside or the height of a parent element when using percentages.

For example when you're setting the height of the iframe to 80%, it means 80% of the parent height. The parent to the iframe is the body and html so for it to take up 80% of the screen you'd need to make the html and body height 100%

html, body {
    height: 100%;
}

Play around with: http://codepen.io/aihowes/pen/GqEXQO to see if you get an understanding.

Upvotes: 4

Related Questions