"Schermo intero" <iframe>

163

Quando utilizzo il seguente codice per creare un iframe:

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

L'iframe non va fino in fondo: un "bordo" bianco 10px circonda l'iframe. Come ho potuto risolvere questo?

Ecco un'immagine del problema:

Schermata del sito

html iframe

— Trufa
fonte

103

Il bodydispone di un margine di default nella maggior parte dei browser. Provare:

body {
    margin: 0;
}

nella pagina con il iframe.

— kevingessner
fonte

301

Per coprire l'intero viewport, è possibile utilizzare:

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

~~E assicurati di impostare i margini della pagina incorniciata su 0, ad es body { margin: 0; }.~~ - In realtà, questo non è necessario con questa soluzione.

Lo sto usando con successo, con un ulteriore display:nonee JS per mostrarlo quando l'utente fa clic sul controllo appropriato.

Nota: per riempire l'area di visualizzazione del genitore anziché l'intera finestra, passare position:fixeda position:absolute.

— Lawrence Dol
fonte

31

Questa risposta risolve il modo in cui iframe occupa l'intero schermo

— Mark Ma

Puoi anche utilizzare le lunghezze in percentuale della finestra .

— Josh Crozier,

2

la risposta accettata non ha funzionato per me. questo ha fatto. Grazie.

— AlexVPerl

2

Bella risposta! Semplice, cross-browser e definitivo.

— blankip

Funziona perfettamente con HTML 5

— break7533,

39

È inoltre possibile utilizzare lunghezze percentuali viewport per raggiungere questo obiettivo:

5.1.2. Lunghezze percentuali viewport: le unità 'vw', 'vh', 'vmin', 'vmax'

Le lunghezze in percentuale della finestra sono relative alla dimensione del blocco contenente iniziale. Quando l'altezza o la larghezza del blocco contenitore iniziale viene modificata, vengono ridimensionate di conseguenza.

Dove 100vhrappresenta l'altezza della finestra e allo stesso modo 100vwrappresenta la larghezza.

Esempio qui

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>

Espandi frammento

Questo è supportato nella maggior parte dei browser moderni: il supporto è disponibile qui .

— Josh Crozier
fonte

8

Usa frameborder="0". Ecco un esempio completo:

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

7

Prova ad aggiungere il seguente attributo:

scrolling="no"

— cmaxtech
fonte

5

Impossibile dirlo senza vedere un esempio dal vivo, ma prova a dare entrambi i corpi margin: 0px

— Pekka
fonte

@Trufa potrebbe essere il margine, ma potrebbe anche essere qualcos'altro. È meglio utilizzare la vista "Layout" di Firebug per scoprirlo

— Pekka,

2

Potresti provare frameborder=0.

— Novizio
fonte

Grazie, ma è "dentro l'iframe" che avevo bisogno di modificare l'esterno (non sapevo che fino alla risposta di @kevingessner) grazie !!

— Trufa,

2

L'aggiunta di questo al tuo iframe potrebbe risolvere il problema:

frameborder="0"  seamless="seamless"

— pentexnyx
fonte

1

@FABBRj Fantastico Potrei aiutare: D

— pentexnyx

0

Ho creato un modello di sintesi che unisce alcune delle risposte sopra.

— Ohad Cohen
fonte

-2

Usa questo codice invece di esso:

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

7

Non più supportato in HTML5

— Hari Karam Singh il