Iframe a schermo intero con un'altezza del 100%

238

Iframe height = 100% è supportato in tutti i browser?

Sto usando doctype come:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Nel mio codice iframe, se dico:

<iframe src="xyz.pdf" width="100%" height="100%" />

Voglio dire, prenderà effettivamente l'altezza della pagina rimanente (dato che c'è un altro frame in cima con altezza fissa di 50px) È supportato in tutti i principali browser (IE / Firefox / Safari)?

Anche per quanto riguarda le barre di scorrimento, anche se dico scrolling="no", posso vedere le barre di scorrimento disabilitate in Firefox ... Come posso nascondere completamente le barre di scorrimento e impostare automaticamente l'altezza iframe?

javascript  html  css  iframe  html-frames 
— testndtv
fonte
14
Vedi in realtà non ho tutti i browser installati..anche diverse versioni..anche volevo solo assicurarmi che fosse un po 'standard ..
— testndtv,
1
Puoi anche provarlo in un validatore css.
— Ruben,
6
Sì, ciò non dà alcun errore / avviso ... Ma la mia domanda è: tutti i browser applicano effettivamente il 100% di altezza?
— testndtv,
Per me questa risposta ha funzionato bene: stackoverflow.com/questions/5272519/…
— Zied Hamdi

Risposte:

276

È possibile utilizzare il set di frame come indicato nella risposta precedente, ma se si insiste sull'uso di iFrames, dovrebbero funzionare i 2 esempi seguenti:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

Un'alternativa:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

Per nascondere lo scorrimento con 2 alternative come mostrato sopra:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

Hack con il secondo esempio:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

Per nascondere le barre di scorrimento dell'iFrame, viene creato il genitore overflow: hiddenper nascondere le barre di scorrimento e l'iFrame viene fatto salire fino al 150% di larghezza e altezza che forza le barre di scorrimento all'esterno della pagina e poiché il corpo non ha barre di scorrimento non ci si può aspettare che l'iframe superi i limiti della pagina. Questo nasconde le barre di scorrimento dell'iFrame a tutta larghezza!

— Ascia
fonte
3
Sembra buono ... Solo una domanda però ... Perché dobbiamo usare style = "height: 100%; larghezza: 100%;" quando stiamo comunque dicendo iframe height = "100%" width = "100%"
— testndtv
1
Anche solo IE non sta prendendo l'altezza del 100% (richiede circa
— 200 px
@Boris Zbarsky Sì, grazie per avermelo fatto notare! Ho aggiornato il post ora !! @hmthr La tua prima domanda relativa ai tag doppi è perché i browser precedenti prendono i tag "height" e "width" ma non funzionano bene con i tag style! Per quanto riguarda il bug di IE, preferirei che rimanessi con il primo codice per quel caso.
— Ax
15
Per far sì che l'iframe usi correttamente il 100%, il genitore deve essere al 100%. Nei documenti più recenti l'html e il tag body non sono automaticamente al 100%. Quando ho aggiunto l'altezza: 100% per html e body, ha funzionato perfettamente. Quindi, la risposta corretta per la domanda, penso, è la risposta di Rudie, tranne per il fatto che ho dovuto mantenere il mio doctype xhtml. Inoltre, si noti che le regole di overflow non sono quindi necessarie. Le barre di scorrimento funzionano quindi come previsto, automaticamente.
— Spiralis,
3
Questa risposta SO è anche molto breve e carina.
— Uwe Keim,
164

3 approcci per la creazione di uno schermo intero iframe:

  • Approccio 1 - Lunghezze percentuali viewport

    Nei browser supportati , è possibile utilizzare lunghezze percentuali delle finestre come height: 100vh.

    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

  • Approccio 2 - Posizionamento fisso

    Questo approccio è abbastanza diretto. Basta impostare il posizionamento fixeddell'elemento e aggiungere un height/ widthdi 100%.

    Esempio qui

    iframe {
    position: fixed;
    background: #000;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}
    <iframe></iframe>
    Espandi frammento

  • Approccio 3

    Per questo ultimo metodo, è sufficiente impostare l' heightdegli body/ html/ iframeelementi a 100%.

    Esempio qui

    html, body {
    height: 100%;
    margin: 0;         /* Reset default margin on the body element */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    width: 100%;
    height: 100%;
}
    <iframe></iframe>
    Espandi frammento

— Josh Crozier
fonte
4
Ho finito con una variante dell'opzione 1 ... Ho usato larghezza: 100% e altezza: 100vh perché la fonte che stavo estraendo era piuttosto ampia e l'iframe è contenuto in un div. Soluzione eccellente Grazie.
— NotJay
2
l'aggiunta ha display: blockfatto il trucco per evitare di avere una doppia barra di scorrimento
— KavenG,
45

1. Cambia il tuo DOCTYPE in qualcosa di meno rigoroso. Non usare XHTML; è sciocco. Usa il doctype HTML 5 e sei a posto:

<!doctype html>

2. Potrebbe essere necessario accertarsi (dipende dal browser) che il genitore dell'iframe abbia un'altezza. E i suoi genitori. E i suoi genitori. Eccetera:

html, body { height: 100%; }
— Rudie
fonte
9
La parte importante qui per me era che il tag html e body necessitava di un'altezza: 100%. Grazie.
— Spiralis,
1
L'impostazione di solo body funziona in Chrome, ma non in altri browser.
— Dingle,
— Josh Crozier,
36

Mi sono imbattuto nello stesso problema, stavo tirando un iframe in un div. Prova questo:

<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>

L'altezza è impostata su 100 VH che indica l'altezza della finestra. Inoltre, la larghezza potrebbe essere impostata su 100 Vw, anche se è probabile che si verifichino problemi se il file di origine è reattivo (la cornice diventerà molto ampia).

— NotJay
fonte
3
Per quanto ne so, Seamless non è supportato in nessun browser
— VisualBean,
1
Dopo aver trascorso più tempo di quanto mi piacerebbe ammettere di agitarmi per questo problema, questo è ESATTAMENTE quello di cui avevo bisogno. Tranne che al posto di un sito Web, ho usato un altro file HTML, che richiedeva una piccola modifica dell'altezza del viewport e ora è bene andare. Grazie!
— Thomas Jacobs,
29

Questo ha funzionato molto bene per me (solo se i contenuti iframe provengono dallo stesso dominio ):

<script type="text/javascript">
function calcHeight(iframeElement){
    var the_height=  iframeElement.contentWindow.document.body.scrollHeight;
    iframeElement.height=  the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>
— Ivan
fonte
21
Funzionerà solo se si iframe srctrova sullo stesso dominio della pagina padre, altrimenti verrà visualizzato un errore di autorizzazione negata contentWindow.document.
— Wolfyuk,
Ci è voluto un po 'per farlo funzionare all'interno di Wordpress, ho appena aggiunto uno shortcode nel mio plugin. FUNZIONA COME UN FASCINO.
— Andy,
Funziona. ma il problema è che non verrà ricalcolato l'altezza su ogni postback iframe interno. C'è qualche soluzione?
— Behrouz.M,
7 

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

— Khoa
fonte
6

<iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>

— Heitor Giacomini
fonte
4

Il seguente lavoro testato

<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>
— Uma Shankar Goel
fonte
1
Ci sono altre 14 risposte già qui. Puoi spiegare in che modo la tua risposta è migliore o almeno diversa dalle altre 14?
— Stephen Rauch,
2

In aggiunta alla risposta di Akshit Soota: è importante impostare in modo esplicito l'altezza di ciascun elemento padre, anche della tabella e della colonna se presenti:

<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">


    <table style="width: 100%; height: 100%" cellspacing="0"  cellpadding="0">
        <tr>
            <td valign="top" align="left" height="100%">
                <iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;" 
                        width="100%" height="100%" frameborder="0" scrolling="no"
                        src="http://www.youraddress.com" ></iframe> 
            </td>
— Brabbeldas
fonte
2

Per prima cosa aggiungi CSS

html,body{
height:100%;
}

Questo sarà l'html:

 <div style="position:relative;height:100%;max-width:500px;margin:auto">
    <iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
    </iframe>
    </div>
— Tariq Javed
fonte
1

Ecco un codice conciso. Si basa su un metodo jquery per trovare l'altezza della finestra corrente. Al caricamento di iFrame imposta l'altezza dell'iframe in modo che sia la stessa della finestra corrente. Quindi, per gestire il ridimensionamento della pagina, il tag body ha un gestore di eventi onresize che imposta l'altezza dell'iframe ogni volta che il documento viene ridimensionato.

<html>
<head>
    <title>my I frame is as tall as your page</title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
    <iframe id="iframe1" src="yourpage.html" style="width:100%;"  onload="this.height=$(window).height();"></iframe>
</body>
</html>

ecco un esempio funzionante: http://jsbin.com/soqeq/1/

— BraveNewMath
fonte
0

Un altro modo per creare uno schermo fluido iframe:

Il video incorporato riempie l'intera viewportarea quando la pagina viene caricata

Bel approccio per le landing page con video o qualsiasi contenuto incorporato. Puoi avere qualsiasi contenuto aggiuntivo sotto al video incorporato, che viene rivelato quando scorri la pagina verso il basso.

Esempio:

Codice CSS e HTML.

body {
    margin: 0;
    background-color: #E1E1E1;
}
header {
    width: 100%;
    height: 56vw;
    max-height: 100vh;
}
.embwrap {
    width: 100%;
    height: 100%;
    display: table;
}
.embwrap .embcell {
    width: auto;
    background-color: black;
    display: table-cell;
    vertical-align: top;
}
.embwrap .embcell .ifrwrap {
    height: 100%;
    width: 100%;
    display: inline-table;
    background-color: black;
}

.embwrap .embcell .ifrwrap iframe {
    height: 100%;
    width: 100%;
}
<header>
  <div class="embwrap">
    <div class="embcell">
      <div class="ifrwrap">
        <iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true" scrolling="no" frameborder="0" width="1920" height="1440" src="http://www.youtube.com/embed/5SIgYp3XTMk?autoplay=0&amp;modestbranding=1&amp;iv_load_policy=3&amp;showsearch=0&amp;rel=1&amp;controls=1&amp;showinfo=1&amp;fs=1"></iframe>
      </div>
    </div>
  </div>
</header>
<article>
  <div style="margin:30px; text-align: justify;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem orci, rhoncus ut tellus non, pharetra consequat risus. </p>
    <p>Mauris aliquet egestas odio, sit amet sagittis tellus scelerisque in. Fusce in mauris vel turpis ornare placerat non vel purus. Sed in lobortis </p>
  </div>
</article>
Espandi frammento

— DAH
fonte
Nota che potresti aver bisogno di javascript per Firefox. C'è un problema comune con l'altezza iframe su Firefox.
— DAH,
0

http://embedresponsively.com/

Questa è una grande risorsa e ha funzionato molto bene, le poche volte che l'ho usata. Crea il seguente codice ....

<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
— Tom Witherington
fonte
0

Solo questo ha funzionato per me (ma per "stesso dominio"):

function MakeIframeFullHeight(iframeElement){
    iframeElement.style.width   = "100%";
    var ifrD = iframeElement.contentDocument || iframeElement.contentWindow.document;
    var mHeight = parseInt( window.getComputedStyle( ifrD.documentElement).height );  // Math.max( ifrD.body.scrollHeight, .. offsetHeight, ....clientHeight,
    var margins = ifrD.body.style.margin + ifrD.body.style.padding + ifrD.documentElement.style.margin + ifrD.documentElement.style.padding;
    if(margins=="") { margins=0;  ifrD.body.style.margin="0px"; }
    (function(){
       var interval = setInterval(function(){
        if(ifrD.readyState  == 'complete' ){
            iframeElement.style.height  = (parseInt(window.getComputedStyle( ifrD.documentElement).height) + margins+1) +"px";
            setTimeout( function(){ clearInterval(interval); }, 1000 );
        } 
       },1000)
    })();
}

puoi usare: 

MakeIframeFullHeight(document.getElementById("iframe_id"));

o 

<iframe .... onload="MakeIframeFullHeight(this);" ....
— T.Todua
fonte
0

Secondo https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe , i valori percentuali non sono più consentiti. Ma quanto segue ha funzionato per me

<iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>

Sebbene funzioni width:100%, height:100%non funziona. Quindi window.innerHeightè stato usato. Puoi anche usare i pixel CSS per l'altezza.

Codice di lavoro: Link Sito di lavoro: Link

— Agnel Vishal
fonte
0 
<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">

</iframe>
— blueDexter
fonte
0

Puoi chiamare una funzione che calcolerà l'assedio del corpo dell'iframe quando l'iframe viene caricato:

<script type="text/javascript">
    function iframeloaded(){
       var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
       curHeight = $frame.contents().find('body').height();
       if ( curHeight != lastHeight ) {
           $frame.css('height', (lastHeight = curHeight) + 'px' );
       }
    }
</script>

<iframe onload="iframeloaded()" src=...>
— Tejpal Sharma
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.