Question

我的高度为90像素。下面是一个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>

Answer 1

首先将您的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;
}

JSFiddle

Answer 2

有些CSS可以解决这个问题：

body, html { width:100% ;
    height:100% ;
    overflow:hidden ;
}

iframe { width:100% ; 
        height:100% ;
    border:none ;
}

fiddle

Answer 3

$('iframe').height(frameHeight)

fiddle
试试这个

我可以使用jQuery调整iframe的大小来填充剩余的窗口空间吗？

使用Javascript：

HTML：

3 个答案: