「フルスクリーン」<iframe>

163

次のコードを使用してiframeを作成すると、

<iframe src="mypage.html" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>

iframeが完全に移動するわけではありません。10pxの白い「境界線」がiframeを囲んでいます。どうすればこれを解決できますか？

これは問題の画像です：

サイトのスクリーンショット

html  iframe 
— トルファ
ソース

回答:

103

bodyほとんどのブラウザのデフォルトのマージンを持っています。試してください：

body {
    margin: 0;
}

とのページでiframe。

— Kevingessner
ソース
300

ビューポート全体をカバーするには、以下を使用できます。

<iframe src="mypage.html" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
    Your browser doesn't support iframes
</iframe>

また、フレーム付きページのマージンは必ず0に設定してくださいbody { margin: 0; }。-実際には、これはこのソリューションでは必要ありません。

display:noneユーザーが適切なコントロールをクリックしたときに表示される追加のJSを使用して、これを正常に使用しています。

注：ビューポート全体ではなく、親のビュー領域を塗りつぶすには、に変更position:fixedしposition:absoluteます。

— ローレンス・ドル
ソース
31
この答えは、iframeが画面全体を占めるようにする方法を解決します
— Mark Ma
ビューポートのパーセンテージの長さを使用することもできます..
— Josh Crozier
2
受け入れられた答えは私にとってはうまくいきませんでした。これはしました。ありがとう。
— AlexVPerl 2015年
2
正解です。シンプル、クロスブラウザ、そして決定的。
— ブランピク2015年
HTML 5で完全に動作します
— break7533
39

これを達成するために、ビューポートのパーセンテージの長さを使用することもできます。

5.1.2。ビューポートのパーセンテージの長さ：「vw」、「vh」、「vmin」、「vmax」の単位

ビューポートのパーセンテージの長さは、最初の包含ブロックのサイズを基準にしています。最初の包含ブロックの高さまたは幅が変更されると、それらはそれに応じてスケーリングされます。

どこに100vhビューポートの高さを表しており、同様に100vw幅を表しています。

ここの例

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>
スニペットを展開

これは、最新のほとんどのブラウザでサポートされています。サポートはここで確認できます。

— ジョシュ・クロジエ
ソース
8

を使用しframeborder="0"ます。ここに完全な例があります：

    <iframe src="mypage.htm" height="100%" width="100%" frameborder="0">Your browser doesnot support iframes<a href="myPageURL.htm"> click here to view the page directly. </a></iframe>
— Hritik
ソース
5

実例を見ずに言うことは不可能ですが、両方の遺体を与えてみてください margin: 0px

— ペッカ
ソース
@Trufaそれはマージンかもしれませんが、それは他の何かかもしれません。Firebugの「レイアウト」ビューを使用して調べる
— Pekka
2

あなたは試すことができframeborder=0ます。

— 初心者
ソース
ありがとうございましたが、それは「iframeの内側」です。外側を変更する必要がありました（@kevingessnerの回答までは知りませんでした）ありがとうございました。
— Trufa
2

これをiframeに追加すると、問題が解決する場合があります。

frameborder="0"  seamless="seamless"
— Pentexnyx
ソース
1
@FABBRjグレート私は助けることができました：D
— pentexnyx
-2

代わりにこのコードを使用してください：

    <frameset rows="100%,*">
        <frame src="-------------------------URL-------------------------------">
        <noframes>
            <body>
                Your browser does not support frames. To wiew this page please use supporting browsers.
            </body>
        </noframes>
    </frameset>
— IşIkİşİtEn
ソース
7
HTML5ではサポートされなくなりました
— Hari Karam Singh
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.