高さ100％のフルスクリーンiframe

238

iframeの高さ= 100％はすべてのブラウザーでサポートされていますか？

私はdoctypeを次のように使用しています：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

私のiframeコードで、私が言うなら：

<iframe src="xyz.pdf" width="100%" height="100%" />

つまり、残りのページの高さが実際に使用されます（上部に50pxの固定高さの別のフレームがあるため）これはすべての主要なブラウザー（IE / Firefox / Safari）でサポートされていますか？

また、スクロールバーについてはscrolling="no"、私がと言っても、Firefoxで無効なスクロールバーが表示される...スクロールバーを完全に非表示にして、iframeの高さを自動的に設定するにはどうすればよいですか？

javascript  html  css  iframe  html-frames 
— testndtv
ソース
14
..私は別のinstalled..Alsoすべてのブラウザがversions..alsoちょうどそれが一種の標準のであることを確認したかっ必要はありません、実際に参照してください
— testndtv
1
また、CSSバリデーターで試すこともできます。
— ルーベン、
6
はい、それはエラー/警告を与えません...しかし、私の質問はすべてのブラウザが実際に100％の高さを適用するのですか？
— testndtv
私にとってこの答えはうまく働いた： stackoverflow.com/questions/5272519/...
— Ziedハムディ

回答:

276

以前の回答の状態としてフレームセットを使用することもできますが、iFrameの使用に固執している場合は、次の2つの例が機能します。

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

代替：

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

上記のように2つの選択肢でスクロールを非表示にするには：

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

2番目の例をハックします。

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

iFrameのスクロールバーを非表示にするには、親にoverflow: hiddenスクロールバーを非表示にし、iFrameに最大150％の幅と高さを設定します。これにより、ページの外側にスクロールバーが強制されます。これは、本体にスクロールバーがないためです。 iframeがページの境界を超えることは期待できません。これにより、iFrameのスクロールバーが全幅で非表示になります。

— 斧
ソース
3
いいですね..質問が1つだけ...なぜ、style = "height：100％; width：100％;"を使用する必要があるのですか？とにかくiframe height = "100％" width = "100％"と言っているとき
— testndtv
1
また、IEのみが100％の高さを取っていない（周りにかかる200pxのHT）... FFとSafriすべての残りの高さ。..取る
— testndtv
@Boris Zbarskyええ、教えてくれてありがとう！投稿を更新しました!! @hmthrダブルタグに関する最初の質問は、以前のブラウザは「高さ」および「幅」タグを使用しますが、スタイルタグではうまく機能しないためです。IEのバグについては、その場合の最初のコードをそのまま使用することをお勧めします。
— Ax
15
iframeで100％を適切に使用するには、親が100％である必要があります。新しいdoctypeでは、htmlおよびbodyタグが自動的に100％になるわけではありません。htmlとbodyにheight：100％を追加すると、問題なく動作しました。だから、質問の正しい答えは、私のxhtml doctypeを保持しなければならなかったことを除いて、rudieからの答えだと思います。また、オーバーフロールールは不要であることにも注意してください。スクロールバーは意図したとおりに機能します-自動的に。
— Spiralis
3
このSOの答えも非常に短くて良いです。
— Uwe Keim 2013年
164

フルスクリーンを作成する3つの方法iframe：

  • アプローチ2-固定位置

    このアプローチはかなり単純です。fixed要素の位置を設定し、height/ / widthを追加するだけです100%。

    ここの例

    iframe {
    position: fixed;
    background: #000;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}
    <iframe></iframe>
    スニペットを展開

  • アプローチ3

    この最後の方法では、単に設定heightのbody/ html/ iframeに要素を100%。

    ここの例

    html, body {
    height: 100%;
    margin: 0;         /* Reset default margin on the body element */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    width: 100%;
    height: 100%;
}
    <iframe></iframe>
    スニペットを展開

— ジョシュ・クロジエ
ソース
4
オプション1のバリエーションを使用してしまいました...プルしているソースがかなり広く、iframeがdivに含まれているため、width：100％とheight：100vhを使用しました。優れたソリューション。ありがとうございました。
— NotJay 2015
2
追加display: blockすると、二重スクロールバーを使用しないようにするトリックが行われました
— KavenG
45

1. DOCTYPEをそれほど厳密でないものに変更します。XHTMLを使用しないでください。それはばかげています。HTML 5 Doctypeを使用するだけで問題ありません。

<!doctype html>

2.（ブラウザによっては）iframeの親に高さがあることを確認する必要がある場合があります。そしてその親。そしてその親。等：

html, body { height: 100%; }
— ルディー
ソース
9
ここで重要なのは、htmlタグとbodyタグに高さ：100％が必要なことです。ありがとう。
— Spiralis
1
ボディのみの設定はChromeでは機能しますが、他のブラウザでは機能しません。
— ディングル2014
— Josh Crozier 2015年
36

私は同じ問題に遭遇しました、私はdivにiframeを引っ張っていました。これを試して：

<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>

高さは、ビューポートの高さを表す100vhに設定されています。また、幅を100vwに設定することもできますが、ソースファイルが応答する場合は問題が発生する可能性があります（フレームが非常に広くなります）。

— NotJay
ソース
3
私の知る限り、シームレスはどのブラウザでもサポートされていません
— VisualBean '17
1
この問題をいじり回すことを認めるのに必要以上の時間を費やした後、これは私が必要とするものの抜粋です。Webサイトの代わりに別のHTMLファイルを使用しましたが、ビューポートの高さを少し調整する必要がありましたが、これで問題ありません。ありがとうございました！
— トーマスジェイコブス
29

これは私にとって非常にうまくいきました（iframeコンテンツが同じドメインからのものである場合のみ）：

<script type="text/javascript">
function calcHeight(iframeElement){
    var the_height=  iframeElement.contentWindow.document.body.scrollHeight;
    iframeElement.height=  the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>
— イワン
ソース
21
これはiframe src、が親ページと同じドメインにある場合にのみ機能します。それ以外の場合は、で権限拒否エラーが発生しcontentWindow.documentます。
— wolfyuk
Wordpress内でこれを機能させるために少し時間を取って、プラグインにショートコードを追加しました。チャームのような作品。
— Andy
できます。しかし問題は、各内部iframeポストバックの高さを再計算しないことです。回避策はありますか？
— Behrouz.M 2015
7 

body {
    margin: 0;            /* Reset default margin */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}
<iframe></iframe>
スニペットを展開

— ホア
ソース
6

<iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>

— Heitor Giacomini
ソース
4

次のテスト済みの動作

<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>
— ウマシャンカールゴエル
ソース
1
他にも14個の回答があります。あなたの回答が他の14人とどの程度優れているか、少なくとも異なっているかを説明できますか？
— スティーブンラウフ
2

Akshit Sootaの答えに追加：明示的にテーブルとのも、各親要素の高さを設定することはimportandある列があれば：

<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>
— ブラベルダス
ソース
2

最初にCSSを追加します

html,body{
height:100%;
}

これは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>
— タリク・ジャベド
ソース
1

これは簡潔なコードです。現在のウィンドウの高さを見つけるためにjqueryメソッドに依存しています。iFrameのロード時に、iframeの高さが現在のウィンドウと同じになるように設定します。次に、ページのサイズ変更を処理するために、bodyタグには、ドキュメントのサイズが変更されるたびにiframeの高さを設定するonresizeイベントハンドラーがあります。

<html>
<head>
    <title>my I frame is as tall as your page</title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
    <iframe id="iframe1" src="yourpage.html" style="width:100%;"  onload="this.height=$(window).height();"></iframe>
</body>
</html>

これが実際のサンプルです：http : //jsbin.com/soqeq/1/

— BraveNewMath
ソース
0

フルスクリーンフルスクリーンを作成する別の方法iframe：

埋め込みビデオが全体を埋める viewport、ページの読み込み時に領域ます

動画やコンテンツが埋め込まれたランディングページに最適なアプローチ。ページを下にスクロールすると表示される埋め込みビデオの下に追加コンテンツを含めることができます。

例：

CSSおよびHTMLコード。

body {
    margin: 0;
    background-color: #E1E1E1;
}
header {
    width: 100%;
    height: 56vw;
    max-height: 100vh;
}
.embwrap {
    width: 100%;
    height: 100%;
    display: table;
}
.embwrap .embcell {
    width: auto;
    background-color: black;
    display: table-cell;
    vertical-align: top;
}
.embwrap .embcell .ifrwrap {
    height: 100%;
    width: 100%;
    display: inline-table;
    background-color: black;
}

.embwrap .embcell .ifrwrap iframe {
    height: 100%;
    width: 100%;
}
<header>
  <div class="embwrap">
    <div class="embcell">
      <div class="ifrwrap">
        <iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true" scrolling="no" frameborder="0" width="1920" height="1440" src="http://www.youtube.com/embed/5SIgYp3XTMk?autoplay=0&amp;modestbranding=1&amp;iv_load_policy=3&amp;showsearch=0&amp;rel=1&amp;controls=1&amp;showinfo=1&amp;fs=1"></iframe>
      </div>
    </div>
  </div>
</header>
<article>
  <div style="margin:30px; text-align: justify;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem orci, rhoncus ut tellus non, pharetra consequat risus. </p>
    <p>Mauris aliquet egestas odio, sit amet sagittis tellus scelerisque in. Fusce in mauris vel turpis ornare placerat non vel purus. Sed in lobortis </p>
  </div>
</article>
スニペットを展開

— DAH
ソース
FirefoxにはJavaScriptが必要になる場合があります。Firefoxのiframeの高さには一般的な問題があります。
— DAH 2015年
0

http://embedsensitively.com/

これは素晴らしいリソースであり、私が何度か使用したことのある非常にうまく機能しています。次のコードを作成します。

<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
— トム・ウィザリントン
ソース
0

これだけが私にとってうまくいきました（ただし「同じドメイン」では）：

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)
    })();
}

次のいずれかを使用できます。 

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

または 

<iframe .... onload="MakeIframeFullHeight(this);" ....
— T.トドゥア
ソース
0

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframeに従って、パーセント値は許可されなくなりました。しかし、次は私のために働きました

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

動作しますがwidth:100%、height:100%動作しません。そうwindow.innerHeight使用されてきました。高さにcssピクセルを使用することもできます。

作業コード：リンク作業サイト： リンク

— アグネルヴィシャル
ソース
0 
<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">

</iframe>
— blueDexter
ソース
0

iframeが読み込まれたときにiframeの本文の高さを計算する関数を呼び出すことができます。

<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=...>
— テジパルシャルマ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.