Als ik de volgende code gebruik om een iframe te maken:
<iframe src="mypage.html" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>
Het iframe past niet helemaal: een 10px witte “rand” omringt het iframe. Hoe kan ik dit oplossen?
Hier is een afbeelding van het probleem:
Antwoord 1, autoriteit 100%
De bodyheeft een standaardmarge in de meeste browsers. Probeer:
body {
margin: 0;
}
op de pagina met het iframe.
Antwoord 2, autoriteit 99%
Om het volledige kijkvenster te bestrijken, kunt u het volgende gebruiken:
<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>
En zorg ervoor dat u de marges van de omlijste pagina instelt op 0, bijvoorbeeld – Eigenlijk is dit niet nodig met deze oplossing.body { margin: 0; }.
Ik gebruik dit met succes, met een extra display:noneen JS om het te tonen wanneer de gebruiker op het juiste besturingselement klikt.
Opmerking: verander position:fixedin position:absoluteom het weergavegebied van de ouder te vullen in plaats van het hele kijkvenster.
Antwoord 3, autoriteit 36%
Je kunt ook viewport-percentage lengtesgebruiken om dit te bereiken:
5.1.2. Viewport-percentage lengtes: de ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ eenheden
De viewport-percentage lengtes zijn ten opzichte van de grootte van het initiële bevattende blok. Wanneer de hoogte of breedte van het initiële bevattende blok is gewijzigd, worden ze dienovereenkomstig geschaald.
waar 100vhde hoogte van het viewport vertegenwoordigt, en eveneens 100vwvertegenwoordigt de breedte.
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>4, Autoriteit 8%
Gebruik frameborder="0". Hier is een volledig voorbeeld:
<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>
5, Autoriteit 6%
Probeer het volgende kenmerk toe te voegen:
scrolling="no"
6, Autoriteit 3%
U kunt dit stuk code gebruiken:
<iframe src="https://example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0%;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
7, Autoriteit 3%
Dit toevoegen aan uw iframe kan het probleem oplossen:
frameborder="0" seamless="seamless"
Ik hoop dat het helpt 🙂
8, Autoriteit 2%
U kunt proberen frameborder=0.
9
Gebruik deze code in plaats van het:
<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>