我有一个高度为 90 像素的 div。在它下面是一个 iframe。
我想弄清楚如何编写 javascript(或 jQuery)以始终将 iframe 设置为正确的高度以占据屏幕的其余部分。如果有更好的基于 HTML5 的解决方案，我当然也很想知道。
Javascript:
$(document).ready(function() {
var $window = $(window);
function checkSize()
{
var windowHeight = $window.height();
var frameHeight = windowHeight - 90;
$('iframe').height() = frameHeight;
}
checkSize();
$(window).resize(checkSize);
});
HTML:
<body style="overflow:hidden;">
<div style="height:90px;">
Content goes here
</div>
<iframe src="www.someurl.com" style="width:100%; height:900px; seamless: seamless; frameborder: 0;"></iframe>
</body>
最佳答案
首先将您的 iframe 显示为 block。然后，您可以使用 iframe 的顶部相对于窗口高度，计算它到底部的距离:
jQuery
$(window).on('load resize', function(){
$window = $(window);
$('iframe').height(function(){
return $window.height()-$(this).offset().top;
});
});
CSS
iframe{
display:block;
margin:0;
padding:0;
border:0;
}
关于javascript - 我可以使用 jQuery 调整 iframe 的大小以填充剩余的窗口空间吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20125340/