Dopo aver testato vari scenari, credo che questa sia la soluzione migliore:
html {
width: 100%;
height: 100%;
display: table;
}
body {
width: 100%;
display: table-cell;
}
html, body {
margin: 0px;
padding: 0px;
}
È dinamico in quanto il htmle ilbody elementi si espanderanno automaticamente se il loro contenuto di overflow. Ho provato questo nell'ultima versione di Firefox, Chrome e IE 11.
Vedi il violino completo qui (per i tuoi odiatori di tavolo là fuori, puoi sempre cambiarlo per usare un div):
https://jsfiddle.net/71yp4rh1/9/
Detto questo, ci sono diversi problemi con le risposte pubblicate qui .
html, body {
height: 100%;
}
L'uso del CSS sopra farà sì che l'html e l'elemento body NON si espandano automaticamente se il loro contenuto trabocca come mostrato qui:
https://jsfiddle.net/9vyy620m/4/
Mentre scorri, noti lo sfondo ripetuto? Ciò accade perché l'altezza dell'elemento body NON è aumentata a causa del trabocco della tabella figlio. Perché non si espande come nessun altro elemento a blocchi? Non ne sono sicuro. Penso che i browser lo gestiscano in modo errato.
html {
height: 100%;
}
body {
min-height: 100%;
}
L'impostazione di un'altezza minima del 100% sul corpo, come mostrato sopra, causa altri problemi. Se lo fai, non puoi specificare che un div o una tabella figlio occupi un'altezza percentuale come mostrato qui:
https://jsfiddle.net/aq74v2v7/4/
Spero che questo aiuti qualcuno. Penso che i browser lo gestiscano in modo errato. Mi aspetto che l'altezza del corpo si adegui automaticamente diventando più grande se i suoi figli traboccano. Tuttavia, ciò non sembra accadere quando si utilizza il 100% di altezza e 100% di larghezza.