Altezza 100% non funziona per il tag DIV in Internet Explorer 8

Ho il seguente codice che sto usando per visualizzare uno strumento di ricerca con una sezione risultati di scorrimento. In IE il codice funziona bene:Altezza 100% non funziona per il tag DIV in Internet Explorer 8

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
    <html style="background:black;height:100%;width:100%;"> 
    <head> 
     <title>Report</title> 
    </head> 
    <body style="background:black;"> 
     <table HEIGHT="100%" WIDTH="100%" style="background:red;"> 
     <tr> 
     <td> 
     Search Area 
     </td> 
     </tr> 
     <tr> 
     <td HEIGHT="100%" WIDTH="100%" style="background:orange;"> 
     <div style="overflow-y:scroll;height:100%;"> 
      <table style="width:100px;height:1000px;"> 
      <tr> 
      <td style="background:white;"> 
      Results Area 
      </td> 
      </tr> 
      </table> 
     </div>  
     </td> 
     </tr> 
     </table> 
    </body> 
    </html>

Ma quando ho impostato il meta tag per utilizzare la formattazione IE8 aggiungendo: tag DIV

<meta http-equiv='X-UA-Compatible' content='IE=edge' />

La parte inferiore si espande oltre la pagina. Ho provato un certo numero di opzioni e non riesco a trovare un modo per aggirarlo senza effettivamente specificare un'altezza per i valori. Che non funzionerà come voglio che la pagina occupi il 100% dello schermo indipendentemente dalla dimensione della finestra del browser.

Qualsiasi aiuto sarebbe molto apprezzato.

fonte

2009-10-07 Anonymous

È necessario impostare tutti i margini e i paddock per gli elementi padre su zero per ottenere ciò che si desidera.

Aggiornamento: Spiacente, non ho capito il problema in una volta. Il suggerimento di Ben dovrebbe essere il migliore che presumo. :)

Aggiornamento 2: Oops, poiché Ben ha cancellato la sua risposta il mio primo aggiornamento non ha alcun senso. Prova a impostare l'altezza del corpo al 100%, che dovrebbe risolvere il problema.

fonte

2009-10-07 18:19:23 arno

La mia conoscenza del cross browser CSS non è così grande, quindi potrebbe non essere la soluzione migliore, ma è una soluzione.

Per quanto ho visto, è sempre necessario impostare l'altezza/larghezza del contenitore che si desidera traboccare, quindi è necessario impostarli.

Per gestire la risoluzione, suggerisco di aggiungere uno script jQuery all'evento onReady che risolva in modo dinamico l'altezza e la larghezza rendendo l'overflow funzionante.

fonte

2009-10-07 18:19:50 tucaz

Avevo il problema simile come te e, infine, la soluzione era modificare una voce di riga CSS con un modificatore !important per una dichiarazione di altezza fissa. Nel codice HTML la classe (definita in CSS) aveva il height assegnato a 100%, ma il CSS applicava lo !important durante il caricamento dello stile.

fonte

2009-12-16 16:22:12 ocell

Questo metatag consente il corretto rendering CSS, e in CSS - design - height:100%basically doesn't work.

È necessario dare un'altezza specifica per ogni unico antenato dell'elemento, tra cui <body>, <table>, <tr> e anche <tbody> elemento che viene automaticamente inserito dal parser.

In ogni caso, questa disposizione può essere ottenuto in modo più semplice:

.topBanner { 
    position:absolute; position:fixed; 
    height:2em; 
    top:0; left:0; width:100%; 
} 
body {padding-top: 2em}

questo si degrada bene in IE6, e, a differenza overflow, funzionerà correttamente in Safari Mobile.

fonte

2009-12-20 23:52:41 Kornel

Edit:

rimozione della dichiarazione DOCTYPE farà height = lavoro "100%", ma mette il browser in modalità stranezze, però, che non è auspicabile.

In generale, l'utilizzo di tabelle per il layout è sconsigliato, è consigliabile utilizzare CSS.

Ad esempio: http://jsfiddle.net/rf649/7/

HTML

<div id="search">Search Area</div> 
<div id="results">Results Area</div>

CSS:

#search { 
    background-color: red; 
    position: fixed; 
    height: 150px; 
    width: 100%; 
} 
#results{ 
    background-color: orange; 
    position: fixed; 
    top: 150px; 
    width: 100%; 
    bottom: 0; 
    overflow: auto; 
}

fonte

2010-01-03 19:36:40

Rimozione del DOCTYPE può spingere la tua pagina in quirksmode che molto probabilmente causare più problemi di quello che risolve. – Joel

@JoelPotter - Sono d'accordo, hai ragione, ho aggiornato la risposta –

Questo CSS ha anche i suoi problemi in relazione alla compatibilità tra browser (anche se probabilmente non è così male come rimuovere DOCTYPE), dato che IE6 non gestisce correttamente ' posizione: fissa'. –

Altezza 100% non funziona per il tag DIV in Internet Explorer 8

risposta

Problemi correlati