发表新帖
发表新帖

Full-screen iframe with a height of 100%

前端 未结
关注
17 1244
星月不相逢
星月不相逢 2020-11-22 04:35

Is iframe height=100% supported in all browsers?

I am using doctype as:
相关标签:
17条回答
  • 有刺的猬
    2020-11-22 05:18

    You first add css

    html,body{
height:100%;
}

    This will be the html:

     <div style="position:relative;height:100%;max-width:500px;margin:auto">
    <iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
    </iframe>
    </div>
    0 讨论(0)
  • 庸人自扰
    2020-11-22 05:18

    Only this worked for me (but for "same-domain"):

    function MakeIframeFullHeight(iframeElement){
    iframeElement.style.width   = "100%";
    var ifrD = iframeElement.contentDocument || iframeElement.contentWindow.document;
    var mHeight = parseInt( window.getComputedStyle( ifrD.documentElement).height );  // Math.max( ifrD.body.scrollHeight, .. offsetHeight, ....clientHeight,
    var margins = ifrD.body.style.margin + ifrD.body.style.padding + ifrD.documentElement.style.margin + ifrD.documentElement.style.padding;
    if(margins=="") { margins=0;  ifrD.body.style.margin="0px"; }
    (function(){
       var interval = setInterval(function(){
        if(ifrD.readyState  == 'complete' ){
            iframeElement.style.height  = (parseInt(window.getComputedStyle( ifrD.documentElement).height) + margins+1) +"px";
            setTimeout( function(){ clearInterval(interval); }, 1000 );
        } 
       },1000)
    })();
}

    you can use either: 

    MakeIframeFullHeight(document.getElementById("iframe_id"));

    or 

    <iframe .... onload="MakeIframeFullHeight(this);" ....
    0 讨论(0)
  • 爱一瞬间的悲伤
    2020-11-22 05:20

    The following tested working

    <iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>
    0 讨论(0)
  • 长情又很酷
    2020-11-22 05:20

    Additional to the answer of Akshit Soota: it is importand to explicitly set the height of each parent element, also of the table and column if any:

    <body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">


    <table style="width: 100%; height: 100%" cellspacing="0"  cellpadding="0">
        <tr>
            <td valign="top" align="left" height="100%">
                <iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;" 
                        width="100%" height="100%" frameborder="0" scrolling="no"
                        src="http://www.youraddress.com" ></iframe> 
            </td>
    0 讨论(0)
  • 萌比男神i
    2020-11-22 05:21

    As per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe, percentage values are no longer allowed. But the following worked for me

    <iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>

    Though width:100% works, height:100% does not work. So window.innerHeight has been used. You can also use css pixels for height.

    Working code: Link Working site: Link

    0 讨论(0)
  • 你的背包
    2020-11-22 05:21

    You can can call a function which will calculate the iframe's body hieght when the iframe is loaded:

    <script type="text/javascript">
    function iframeloaded(){
       var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
       curHeight = $frame.contents().find('body').height();
       if ( curHeight != lastHeight ) {
           $frame.css('height', (lastHeight = curHeight) + 'px' );
       }
    }
</script>

<iframe onload="iframeloaded()" src=...>
    0 讨论(0)
 看不清?
提交回复
热议问题