$（'＃iframe'）。身高不起作用

时间：2016-07-05 14:03:15

标签： javascript jquery html css

我希望iFrame占据80％的高度和广告，以获得剩余的20％。

代码

<!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>

截图

enter image description here

为什么不起作用？

1 个答案:

答案 0 :(得分：4)

通常，元素的高度取决于使用百分比时内容的高度或父元素的高度。

例如，当您将iframe的高度设置为80％时，它意味着父高度的80％。 iframe的父级是正文和html，因此它占据了屏幕的80％，你需要使html和身高100％

html, body {
    height: 100%;
}

使用：http://codepen.io/aihowes/pen/GqEXQO，看看你是否理解。

相关问题
最新问题