我希望 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>
截图
为什么它不起作用？
最佳答案
通常元素的高度取决于内部内容的高度或使用百分比时父元素的高度。
例如，当您将 iframe 的高度设置为 80% 时，这意味着父高度的 80%。 iframe 的父级是 body 和 html，因此要使其占据屏幕的 80%，您需要将 html 和 body 高度设置为 100%
html, body {
height: 100%;
}
玩转:http://codepen.io/aihowes/pen/GqEXQO看看你是否理解。
关于javascript - $ ('#iframe' ).height 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38205495/