Full Page <iframe>

Ho il codice di esempio qui sotto. Funziona bene con tutti i browser ad eccezione dei browser su dispositivi mobili.Full Page <iframe>

Il tag di overflow è il problema.

funziona con tutti tranne che per il mobile:

margin: 0; padding: 0; height: 100%; overflow: hidden;

funziona con tutti i computer portatili e non:

margin: 0; padding: 0; height: 100%;

Qual è il modo migliore per farlo funzionare su entrambi?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Test Layout</title> 
     <style type="text/css"> 
      body, html 
      { 
       margin: 0; padding: 0; height: 100%; overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 
      <iframe width="100%" height="100%" src="http://www.cnn.com" /> 
    </body> 
</html>

fonte

2013-07-17 Lacer

Perché non solo reindirizzare a 'cnn.com'? – GolezTrol

cnn.com è più di un esempio. per mostrare il comportamento che sto cercando di prevenire. – Lacer

aggiungi solo '' al capo dell'HTML che contiene e la risposta è di nuovo (a almeno parzialmente). – Nukey

106

Ecco il codice di lavoro. Funziona con i browser desktop e mobili. spero che sia d'aiuto. grazie per tutti che rispondono.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Test Layout</title> 
     <style type="text/css"> 
      body, html 
      { 
       margin: 0; padding: 0; height: 100%; overflow: hidden; 
      } 

      #content 
      { 
       position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="content"> 
      <iframe width="100%" height="100%" frameborder="0" src="http://cnn.com" /> 
     </div> 
    </body> 
</html>

fonte

2013-07-18 04:14:00 Lacer

attenzione, quando volevo mettere un iframe sopra - c'era un problema in Chrome. Ho aggiunto la chiusura e funziona –

Sembra che stia portando via la _responsività_ (cioè il collasso di colonne, ecc.) Dal contenuto all'interno dell'iframe. Ma in qualche modo solo quando si apre la pagina con Safari mobile, non quando si ridimensiona un browser desktop. Qualche idea su cosa potrebbe causare quel comportamento? – psteinweber

@psteinweber, devi solo aggiungere '' alla pagina contenente. – jfeust

Questo è quello che ho usato in passato.

html, body { 
    height: 100%; 
    overflow: auto; 
}

Anche nel iframe aggiungere il seguente stile

border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%

fonte

2013-07-17 21:31:38

grazie per la risposta, ma è essenzialmente quello che ho quindi non funziona. Sul browser mobile taglia qualsiasi cosa che è overflow e non ti consente di scorrere. – Lacer

@Lacer Prova a sostituire 'overflow: hidden' con' overflow: auto' –

provalo. sul browser mobile lo interrompe e sui browser desktop causa due pergamene – Lacer

È supportato per il cross-browser ed è completamente reattivo.

<iframe src="https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview" style="position:fixed; top:0px; bottom:0px; right:0px; width: 100%; border: none; margin:0; padding:0; overflow: hidden; z-index:999999; height: 100%;">

fonte

2017-04-13 15:17:34

mettere questo nel CSS.

iframe{ 
width:100%; 
height:100vh; 
}

fonte

2018-03-08 19:19:02

Full Page <iframe>

risposta

Problemi correlati