web-dev-qa-db-ja.com

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

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

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

Iframeは完全には行きません。10pxの白い「ボーダー」がiframeを囲みます。どうすればこれを解決できますか？

これが問題のイメージです。

Screenshot of site

htmliframe
129
Trufa

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

body {
    margin: 0;
}

ページ内でiframeと入力します。

91
kevingessner

ビューポート全体をカバーするには、次のようにします。

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

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

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

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

245
Lawrence Dol

これを達成するために viewport-percentage length を使うこともできます。

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>

これは最近のほとんどのブラウザでサポートされています--- サポートはここで見つけることができます 。

33
Josh Crozier

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>
8
Hritik

次の属性を追加してみてください。

scrolling="no"
6
cmaxtech

実例を見ずに言うことは不可能ですが、両方のボディにmargin: 0pxを付けてみてください

5
Pekka 웃

frameborder=0を試すことができます。

2
Newbie