2013-02-09 16 views
5

Ho problemi con iframe e Firefox. Fondamentalmente, sto incorporando un IFrame in un sito per occupare l'intera area del corpo. Funziona perfettamente con Google Chrome come puoi vedere qui. L'I-frame occupa tutta l'area del corpo, senza barre di scorrimento necessarie per navigare nell'iframe.IFrame Fullsize in firefox?

chrome: http://i.stack.imgur.com/muo3U.png

Ma in firefox non funziona correttamente. Come puoi vedere qui, solo una parte dell'iframe è visibile e le barre di scorrimento (sono invisibili ma scorrevoli) devono essere utilizzate per navigare nell'iframe. È molto poco attraente per lo scopo del mio sito web.

Firefox: http://i.stack.imgur.com/6Vm1O.png

quindi mi chiedo come avrei potuto ottenere questo lavoro? Ho cercato e cercato e tutte le soluzioni che ho provato finiscono per non funzionare.

Ecco il mio codice e altri che ho provato.

http://pastebin.com/rmdcnLuw

Grazie per qualsiasi aiuto!

+0

http://www.pastebin.com/rmdcnLuw, ecco il codice che ho provato, mi spiace il post originale non ha ancora fatemi pubblicherà ulteriori di due collegamenti. Grazie ancora per qualsiasi aiuto! – YourFriend

risposta

8

è necessario impostare le vostre body e html elementi per height: 100%

provare qualcosa di simile:

<html style="height: 100%"> 
<body style="height: 100%"> 
    <div style="width:100%; height:100%; background-color:transparent;"> 
    <iframe src="http://www.google.com/" width="100%" height="100%" frameborder="0" scrolling="no"></iframe> 
    </div> 
</body> 
</html> 

Meglio ancora, aggiungere quelle regole al tuo file CSS come tale:

body, html { height: 100%; } 

Si potrebbe anche provare questo:

CSS:

html, body { height: 100%; } 
iframe { width: 100%; height: 100%; } 

HTML:

<html> 
<body> 
     <iframe src="http://www.google.com" frameborder="0" scrolling="no"></iframe> 
</body> 
</html> 

alternativa che si muove frameborder e scorrendo fino al CSS

border: none; rimuove il confine sul iframe, mentre overflow: hidden; disabilita lo scorrimento e nasconde qualsiasi contenuto che ha tagliato fuori della pagina (come il tuo codice originale).

CSS:

html, body { height: 100%; overflow: hidden; } 
iframe { width: 100%; height: 100%; border: none; overflow: hidden; } 

HTML:

<html> 
<body> 
     <iframe src="http://en.wikipedia.org"></iframe> 
</body> 
</html> 
+0

Grazie per la risposta! Purtroppo nessuna di queste opzioni ha funzionato:/firefox non vuole semplicemente accontentarlo>. <. – YourFriend

+0

Strano. Funziona per me. Il codice che hai dato su pastebin - è l'intero codice? –

+0

Ecco il codice in azione: http://chrismorris.org/eg_iframe_stretch.html –

1

provare questo in ur css:

iframe { display:block; width:100%; border:none;} 
+0

'scrolling =" no "' è un attributo HTML, non CSS.Potresti pensare a "overflow: hidden;" –

+0

@ChrisMorris, grazie per il suggerimento. Ho mescolato le cose. ora l'ho cambiato. – Dhwani

+0

Grazie anche per la risposta! Applicare tristemente questo css non cambia nulla in Firefox: /, continua a mostrare il primo quarto del sito all'interno dell'iframe. – YourFriend

Problemi correlati