使用iframe，如何设置高度？

Question

在iframe引入的内部的html中进行了position absolute 的设置，结果使用iframe 的时候它的高比本身的html 高很多

Answer 1

直接设置就好了，请看图

Answer 2

直接设置或者根据视口宽高JS设置iframe.style.height

Answer 3

iframe标签里先随意写个默认高度：

<iframe id="iframe-player" style="display: block; width: 100%; height: 600px" src="../player/index.html" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>

然后父页面的js里可以设置iframe的宽高根据窗口大小调节：

//调节播放控件高度
var pagestyle = function () {
    var rframe = $("#iframe-player");
    //这里宽高比里就看你自己的设置了，随意，例如：
    //var h = $(window).height() - 200;  //根据窗口大小调节控件高度
    var h = rframe.width() * 9 / 16;     //根据控件宽度调节控件高度
    rframe.height(h);
}
//iframe加载事件
$("#iframe-player").on('load', function () {
    pagestyle();

    // 父页面调用iframe的方法xxx()
    document.getElementById('iframe-player').contentWindow.xxx();
});
//窗体改变大小事件
$(window).resize(pagestyle);