web-dev-qa-db-ja.com

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

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では無効になっているスクロールバーを見ることができます。

javascripthtmlcssiframehtml-frames
210
testndtv

前の回答でframesetを使用することもできますが、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のスクロールバーを全幅で隠します。

247
Axe

フルスクリーンのiframeを作成するための3つのアプローチ：

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

    このアプローチはかなり簡単です。 fixed要素の位置を設定し、height/width of 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>
152
Josh Crozier

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

<!doctype html>

2. iframeの親に高さがあることを確認する必要があるかもしれません（ブラウザによって異なります）。そしてその親。そしてその親。等：

html, body { height: 100%; }
42
Rudie

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

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

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

28
NotJay

これは私にとって非常にうまく機能しました（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>
25
Ivan

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

6
Heitor Giacomini
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>
5
khoa

Akshit Sootaの答えに加えて、各親要素の高さを明示的に設定することも重要です。テーブルや column の場合も同様です。

<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
Brabbeldas

最初に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>
2
Tariq Javed

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ピクセルを使用することもできます。

ワーキングコード： リンク ワーキングサイト： リンク

1
Agnel Vishal

これは簡潔なコードです。それは現在のウィンドウの高さを見つけるために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/ /

1
BraveNewMath

次のテスト作業

<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
Uma Shankar Goel

これだけが私のために働きました（しかし、「同じドメイン」のために）：

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);" ....
0
T.Todua

http://embedresponsively.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
Tom Witherington

流動的なフルスクリーン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>
0
D.A.H