iframe到达页面底部

Joh*_*ohn 7 html iframe height styles

有没有办法让高度<iframe>达到页面的底部?通过使用很难判断height:xx%,它可能依赖于浏览器.

代码如下:

<!DOCTYPE html>
<html>
<body style="margin:0">
<p style="margin:10px"> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:95%"></iframe>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

Jor*_*zem 7

使用JavaScript/jQuery,您可以精确地为IFRAME元素设置正确的维度,而无需访问框架本身的DOM(跨域问题),依赖于表或绝对定位(如果框架上方的内容是动态的,则无用)身高):

$(function() {
    var aboveHeight = $("#aboveFrame").outerHeight(true);
    $(window).resize(function() {
        $('#frame').height( $(window).height() - aboveHeight );
    }).resize();
});
Run Code Online (Sandbox Code Playgroud)

示例:http://jsfiddle.net/hongaar/jsdYz/