«Plein écran» <iframe>

163

Lorsque j'utilise le code suivant pour créer une 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 ça?

Voici une image du problème:

Capture d'écran du site

html iframe Trufa
la source

Réponses:

103

Le bodya une marge par défaut dans la plupart des navigateurs. Essayer:

body {
    margin: 0;
}

dans la page avec le iframe.

kevingessner
la source
301

Pour couvrir la totalité de la fenêtre, 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 fait, ce n'est pas nécessaire avec cette solution.

J'utilise cela avec succès, avec un display:noneJS supplémentaire pour l'afficher lorsque l'utilisateur clique sur le contrôle approprié.

Remarque: pour remplir la zone de vue du parent au lieu de la fenêtre entière, passez position:fixedà position:absolute.

Lawrence Dol
la source
31
Cette réponse résout comment faire en sorte que l'iframe occupe tout l'écran
Mark Ma
Vous pouvez également utiliser des longueurs de pourcentage de fenêtre .
Josh Crozier
2
La réponse acceptée n'a pas fonctionné pour moi. cela a fait. Merci.
AlexVPerl
2
Très bonne réponse! Simple, multi-navigateur et définitif.
blankip
Fonctionne parfaitement avec HTML 5
break7533
39

Vous pouvez également utiliser des longueurs de pourcentage de fenêtre pour y parvenir:

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

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

Où 100vhreprésente la hauteur de la fenêtre et 100vwreprésente également 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>
Développer l'extrait

Ceci est pris en charge dans la plupart des navigateurs modernes - le support peut être trouvé ici .

Josh Crozier
la source
8

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>
Hritik
la source
7

Essayez d'ajouter l'attribut suivant:

scrolling="no"
cmaxtech
la source
5

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

Pekka
la source
@Trufa ça pourrait être la marge, mais ça pourrait aussi être autre chose. Meilleure utilisation de la vue "Mise en page" de Firebug pour le savoir
Pekka
2

Vous pourriez essayer frameborder=0.

Débutant
la source
Merci mais c'est "à l'intérieur de l'iframe" J'avais besoin de modifier l'extérieur (je ne le savais pas avant la réponse de @kevingessner) merci !!
Trufa
2

L'ajout de ceci à votre iframe peut résoudre le problème:

frameborder="0"  seamless="seamless"
pentexnyx
la source
1
@FABBRj Super, je pourrais aider: D
pentexnyx
0

J'ai créé un modèle essentiel réunissant certaines des réponses ci-dessus.

Ohad Cohen
la source
-2

Utilisez ce code à la place:

    <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
la source
7
N'est plus pris en charge dans HTML5
Hari Karam Singh