IFRAME e posizioni assolute contrastanti

Vorrei avere un IFRAME dimensionati dinamicamente utilizzando il seguente CSS:IFRAME e posizioni assolute contrastanti

#myiframe { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
}

Tuttavia, nessun browser sembra a sostegno di questa.

In un buon browser potrei avvolgere l'IFRAME in un DIV con lo stile CSS quotato e impostare l'altezza & dell'IFRAME al 100%. Ma questo non funziona in IE7. A parte l'uso delle espressioni CSS, qualcuno è riuscito a risolverlo?

Aggiornamento

MatTheCat rispose con uno scenario che funziona se l'IFRAME si trova direttamente sotto il corpo e il tag body/html avere height: 100% set. Nella mia domanda iniziale non ho indicato dove fosse l'IFRAME e quale stile fosse applicato al suo contenitore. Speriamo che i seguenti indirizzi: questa

<html> 
    <body> 
     <div id="container"><iframe id="myiframe"></iframe></div> 
    </body> 
</html>

e supponiamo il seguente CSS container:

#container { 
    position: absolute; 
    top: 10px; 
    bottom: 10px; 
    left: 10px; 
    right: 10px; 
}

se ora posto height: 100% sul IFRAME non sarà formato correttamente.

fonte

2010-10-20 Anonymous

ti suggerisco di 'accettare' una delle due risposte più recenti qui poiché sia rispondere alla domanda. Ho assegnato una taglia. –

html,body { 
    margin:0; 
    padding:0; 
    height:100%; 
    min-height:100%; 
} 
#myiframe { 
    width:100%; 
    height:100%; 
    border:0; 
}

funzionano bene anche con IE7.

fonte

2010-10-20 14:53:28 MatTheCat

Grazie per la risposta. Sfortunatamente non ero abbastanza specifico nella domanda. L'ho modificato con ulteriori dettagli. –

Direi di dare un'occhiata a questa domanda di overflow dello stack. Potrebbe aiutare:

Make Iframe to fit 100% of container's remaining height

fonte

2010-10-20 16:01:55 InvisibleBacon

Perché non utilizzare il livello di & larghezza? Avresti comunque ottenuto una posizione assoluta impostando l'alto/basso & sinistra/destra, come nell'esempio seguente.

<!DOCTYPE HTML> 
<html> 
    <head> 
     <style type="text/css"> 
      html, body { 
       margin:0; 
       padding:0; 
       border:0px; 
       height:100%; 
       width:100%; 
      } 
      #container { 
       position: absolute; 
       top: 10px; 
       bottom: 10px; 
       left: 10px; 
       right: 10px; 
      } 
      #myiframe { 
       position: absolute; 
       top: 0%; 
       left: 0%; 
       height: 100%; 
       width: 100%; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="container"><iframe id="myiframe"></iframe></div> 
    </body> 
</html>

Questo funziona per me (Testato su IE9).

fonte

2011-09-30 18:33:45 Sathvik

Questo funziona. L'unica cosa che mi mancava era la 'posizione: assoluta' su 'iframe'. Puoi spiegare perché ho bisogno di racchiudere l'iframe in un contenitore piuttosto che mettere il CSS del contenitore su di esso? –

Cosa intendi mettendo il CSS del contenitore su "iframe"? Se stai parlando di non usare un contenitore in primo luogo, l'elemento body (genitore) diventa il suo contenitore per impostazione predefinita. – Sathvik

Possiamo ancora ottenere lo stesso effetto variando i parametri 'top',' left', 'height' e' width' su 'iframe'. – Sathvik

Utilizzare un div per l'imbottitura su tutti i lati. Inserisci l'iframe in esso utilizzando il 100% del suo div genitore.

http://jsfiddle.net/sg3s/j8sbX/

Ora ci sono alcune cose che dovete ricordare. Un iframe è in origine un frame incorporato, quindi, mentre i browser moderni non si preoccupano, imposta display: blocca su di esso. Di default ha anche un bordo. Qualsiasi stying che vogliamo essere fatto deve essere fatto sul contenitore iframe, o altrimenti si romperà il container al 100%.

Ed è così che ci avrebbe messo un elemento di sopra di essa:

http://jsfiddle.net/sg3s/j8sbX/25/ (edit: il mio male, hai veramente bisogno di impostare border = 0 sul iframe per IE7)

dovrebbe funzionare bene in IE7 + (IE6 non piace il posizionamento assoluto + utilizzando alto/destra/basso/sinistra per dare il layout)

Modifica Qualche spiegazione in più

Dobbiamo per lo stile contenitore iframe m solo perché un iframe su se stesso non si lascia dimensionare con top/left/bottom/right. Ma quello che funzionerà sta impostando la sua larghezza e altezza al 100%. Quindi, partendo da lì, semplicemente racchiudiamo l'iframe in un elemento che possiamo affidare in modo affidabile per rendere meno della finestra 100%, la dimensione a cui gli elementi vengono assegnati automaticamente quando nessuno dei loro genitori ha un'altezza/larghezza statica.

Pensandoci, possiamo effettivamente eliminare l'assoluto e bloccare. http://jsfiddle.net/sg3s/j8sbX/26/ Tuttavia, potrebbe voler fare un doppio controllo su IE7.

Dopo aver reso l'iframe alto e largo al 100% non possiamo mettere alcun margine, riempimento o bordo su di esso perché verrà aggiunto all'altezza 100% dell'altezza &. Così rendendolo più grande del suo contenitore, per div che si tradurranno in un overflow: visibile, semplicemente mostrando tutto quello che va oltre i bordi. Ma questo a sua volta rovinerebbe i margini, i paddings e gli offset che abbiamo dato ai nostri elementi .... In effetti, per fare in modo che sia solo l'altezza e la larghezza del 100%, è necessario assicurarsi di aver rimosso il bordo predefinito degli iframe.

Provalo aggiungendo un bordo più grande (come 3px) nel mio esempio all'iframe, dovresti essere facilmente in grado di vedere come influisce sul layout.

fonte

2011-09-30 18:55:01 sg3s

@JustinSatyr ha aggiornato la mia risposta;) – sg3s

-1

Si può cercare di utilizzare questo:

document.getElementsByTagName('iframe')[1].style.borderWidth = '0px'; 
document.getElementsByTagName('iframe')[1].style.backgroundColor = 'green';

fonte

2014-11-27 14:24:04 Prachi

IFRAME e posizioni assolute contrastanti

risposta

Problemi correlati