2013-03-06 8 views
11

ho bisogno di incorporare una pagina HTML all'interno di un frame, e sto usando il seguente codice:impostare l'altezza iframe automaticamente

<iframe src="http://www.google.com" style="width: 90%; height: 300px" 
    scrolling="no" marginwidth="0" marginheight="0" frameborder="0" 
    vspace="0" hspace="0"> 

Sto cercando di rendere l'altezza impostato su auto in modo che il telaio automatico si ridimensiona a la lunghezza della pagina senza dover hardcode l'altezza come sto facendo qui. Ho provato height:auto e height:inherit ma non ha funzionato.

+1

Hai provato l'impostazione 'altezza: 100%' se l'iframe è nel corpo che dovrebbe rendere riempire il corpo? – Xander

+0

** Duplicati: ** [Questo] (http://stackoverflow.com/questions/9975810/how-can-i-make-iframe-automatically-adjust-height-according-to-the-contents-with) o [this] (http://stackoverflow.com/questions/819416/adjust-width-height-of-iframe-to-fit-with-content-in-it) entrambi dovrebbero rispondere alla tua domanda. – anroesti

risposta

13

Prova questa codifica

<div> 
    <iframe id='iframe2' src="Mypage.aspx" frameborder="0" style="overflow: hidden; height: 100%; 
     width: 100%; position: absolute;" height="100%" width="100%"></iframe> 
</div> 
+0

Nota: ho trovato che l'altezza e la larghezza dello stile sono glitch. Gli attributi di altezza e larghezza sono la cosa importante qui che sembra funzionare in modo coerente. C'è una ragione per cui hai usato entrambi? – Andrew

+0

% su altezza/larghezza di iframe non è valido HTML5 come da specifica (era comunque valido prima) – vaxquis

3

Se i siti si trovano su domini separati, la pagina chiamante non può accedere all'altezza dell'iframe a causa delle restrizioni del dominio cross-browser. Se hai accesso a entrambi i siti, potresti essere in grado di utilizzare [hack del dominio dei documenti]. 1 Quindi i collegamenti di anroesti dovrebbero aiutare.

+0

Questa libreria su GitHub risolve il problema interdominio, assicurandosi che l'iFrame rimanga dimensionato sul contenuto quando le cose cambiano. https://github.com/davidjbradshaw/iframe-resizer –

Problemi correlati