web-dev-qa-db-fra.com

"Plein écran" <iframe>

Lorsque j'utilise le code suivant pour créer un iframe:

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

L'iframe ne va pas jusqu'au bout: une "bordure" blanche de 10 pixels entoure l'iframe. Comment pourrais-je résoudre ceci?

Voici une image du problème:

Screenshot of site

htmliframe
133
Trufa

La body a une marge par défaut dans la plupart des navigateurs. Essayer:

body {
    margin: 0;
}

dans la page avec le iframe.

94
kevingessner

Pour couvrir la fenêtre entière, vous pouvez utiliser:

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

Et assurez-vous de définir les marges de la page encadrée sur 0, par exemple, body { margin: 0; }. - En réalité, ce n'est pas nécessaire avec cette solution.

J'utilise ceci avec succès, avec un display:none et JS supplémentaires pour l'afficher lorsque l'utilisateur clique sur le contrôle approprié.

Remarque: pour remplir la zone d'affichage du parent au lieu de la totalité de la fenêtre, remplacez position:fixed par position:absolute.

245
Lawrence Dol

Vous pouvez également utiliser viewport-length length pour y parvenir:

5.1.2. Longueurs en pourcentage de la fenêtre: les unités 'vw', 'vh', 'vmin', 'vmax' =

Les longueurs en pourcentage de la fenêtre de visualisation sont relatives à la taille du bloc contenant initial. Lorsque la hauteur ou la largeur du bloc contenant initial est modifiée, ils sont mis à l'échelle en conséquence.

Où 100vh représente la hauteur de la fenêtre d'affichage, de même que 100vw représente la largeur.

Exemple ici 

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>

Ceci est supporté par la plupart des navigateurs modernes - le support peut être trouvé ici .

35
Josh Crozier

Utilisez frameborder="0". Voici un exemple complet:

    <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

Essayez d'ajouter l'attribut suivant:

scrolling="no"
6
cmaxtech

Impossible de dire sans voir un exemple vivant, mais essayez de donner les deux corps margin: 0px

5
Pekka 웃

Vous pouvez essayer frameborder=0.

2
Newbie