"Layar penuh" <iframe>

163

Ketika saya menggunakan kode berikut untuk membuat iframe:

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

Iframe tidak berjalan sepenuhnya - "perbatasan" putih 10px mengelilingi iframe. Bagaimana saya bisa menyelesaikan ini?

Berikut ini adalah gambar masalahnya:

Tangkapan layar situs

html iframe Trufa
sumber

Jawaban:

103

The bodymemiliki margin default di sebagian besar browser. Mencoba:

body {
    margin: 0;
}

di halaman dengan iframe.

kevingessner
sumber
300

Untuk menutupi seluruh viewport, Anda dapat menggunakan:

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

Dan pastikan untuk mengatur margin halaman berbingkai ke 0, misalnya body { margin: 0; },. - Sebenarnya, ini tidak perlu dengan solusi ini.

Saya berhasil menggunakan ini, dengan tambahan display:nonedan JS untuk menunjukkannya ketika pengguna mengklik kontrol yang sesuai.

Catatan: Untuk mengisi area tampilan induk alih-alih seluruh viewport, ubah position:fixedke position:absolute.

Lawrence Dol
sumber
31
Jawaban ini memecahkan bagaimana membuat iframe menempati seluruh layar
Mark Ma
Anda juga dapat menggunakan panjang viewport-persentase ..
Josh Crozier
2
jawaban yang diterima tidak bekerja untuk saya. ini berhasil. Terima kasih.
AlexVPerl
2
Jawaban bagus! Sederhana, lintas browser, dan pasti.
blankip
Berfungsi sempurna dengan HTML 5
break7533
39

Anda juga dapat menggunakan panjang viewport-persentase untuk mencapai ini:

5.1.2. Panjang persentase-viewport: unit 'vw', 'vh', 'vmin', 'vmax'

Panjang viewport-persentase relatif terhadap ukuran blok berisi awal. Ketika tinggi atau lebar blok yang mengandung awal diubah, mereka diskalakan sesuai.

Di mana 100vhmewakili ketinggian viewport, dan juga 100vwmewakili lebar.

Contoh Di Sini

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

Ini didukung di sebagian besar browser modern - dukungan dapat ditemukan di sini .

Josh Crozier
sumber
8

Gunakan frameborder="0". Ini contoh lengkapnya:

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

Coba tambahkan atribut berikut:

scrolling="no"
cmaxtech
sumber
5

Mustahil untuk mengatakan tanpa melihat contoh langsung, tetapi cobalah memberikan kedua tubuh margin: 0px

Pekka
sumber
@ Trufa itu bisa jadi margin, tapi bisa juga yang lain. Gunakan tampilan Firebug "Layout" terbaik untuk mengetahuinya
Pekka
2

Anda bisa mencoba frameborder=0.

Pemula
sumber
Terima kasih tetapi itu adalah "di dalam iframe" Saya perlu memodifikasi bagian luar (saya tidak tahu sampai jawaban @kevingessner) terima kasih !!
Trufa
2

Menambahkan ini ke iframe Anda dapat menyelesaikan masalah:

frameborder="0"  seamless="seamless"
pentexnyx
sumber
1
@ FABBRj Hebat saya bisa membantu: D
pentexnyx
0

Saya telah membuat templat inti yang menyatukan beberapa jawaban di atas.

Ohad Cohen
sumber
-2

Gunakan kode ini sebagai ganti:

    <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
sumber
7
Tidak lagi didukung dalam HTML5
Hari Karam Singh