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 doesn't pergi semua jalan—10px putih "border" mengelilingi iframe. Bagaimana saya bisa memecahkan masalah ini?
Berikut adalah gambar dari masalah:
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>
Saya menggunakan ini berhasil, dengan tambahan display:none
dan JS untuk menunjukkan ketika pengguna mengklik kontrol yang sesuai.
Catatan: Untuk mengisi induk's view area, bukan seluruh viewport, perubahan position:fixed
untuk posisi:absolut
.
Anda juga dapat menggunakan viewport-persentase panjang untuk mencapai hal ini:
viewport-persentase panjang relatif terhadap ukuran awal mengandung blok. Ketika tinggi atau lebar dari awal mengandung blok berubah, mereka adalah skala yang sesuai.
Di mana 100vh
merupakan puncak dari viewport, dan juga 100vw
mewakili lebar.
[Contoh][3]
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>
Hal ini didukung di sebagian besar browser modern - dukungan dapat ditemukan di sini.
Gunakan frameborder="0"
. Berikut ini's penuh contoh:
<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>
Gunakan kode ini bukannya ini:
<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>