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

103

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

body {
    margin: 0;
}

dans la page avec le iframe.

— kevingessner
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
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
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
source

7

Essayez d'ajouter l'attribut suivant:

scrolling="no"

— cmaxtech
source

5

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

— Pekka
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
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
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
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
source

7

N'est plus pris en charge dans HTML5

— Hari Karam Singh