La tabella nidificata con altezza del 100% supera lo schermo in IE

Ecco un pezzo di codice per illustrare il mio problema:

    html, body {height:100%;margin:0;padding:0;} table {border-collapse:collapse;}    
header
test

La pagina che sto attualmente costruendo ha un’intestazione e una tabella sotto di essa, la tabella deve prendere tutto lo spazio verticale disponibile ma non deve superare l’altezza dello schermo. Il codice sopra funziona bene in FF / Chrome / Safari ma nella tabella nidificata di IE supera l’altezza dello schermo esattamente dall’altezza dell’intestazione sopra, causando così una barra di scorrimento verticale che è un comportamento indesiderato.

Come si puo aggiustare?

IE non è adatto a calcolare le altezze nelle tabelle. In questo caso, imposta l’altezza della cella al 100% del corpo e all’html anziché al contenitore principale. La cosa più semplice da fare, ma anche un brutto trucco, è da mettere

< !–- For Internet Explorer -–> su una riga sopra < !DOCTYPE HTML>

Ciò imporrà IE in modalità quirks e dovrebbe essere visualizzato correttamente per il tuo caso. Potrebbe essere necessario riavviare IE piuttosto che aggiornare semplicemente la pagina dopo aver aggiunto il commento.

Modificare

 html, body {height:100%;margin:0;padding:0;} 

a

 html, body {height:100%;margin:0;padding:0; overflow-y: hidden;} 

Rimuoverà la barra di scorrimento verticale dall’IE (o da qualsiasi browser Web)