Après avoir testé différents scénarios, je pense que c'est la meilleure solution:
html {
width: 100%;
height: 100%;
display: table;
}
body {
width: 100%;
display: table-cell;
}
html, body {
margin: 0px;
padding: 0px;
}
Il est dynamique en ce que les html
et les body
éléments augmenteront automatiquement si leur débordement de contenu. J'ai testé cela dans la dernière version de Firefox, Chrome et IE 11.
Voir le violon complet ici (pour vos haineux de table, vous pouvez toujours le changer pour utiliser un div):
https://jsfiddle.net/71yp4rh1/9/
Cela étant dit, il y a plusieurs problèmes avec les réponses affichées ici .
html, body {
height: 100%;
}
L'utilisation du CSS ci-dessus fera que le html et l'élément body ne se développeront PAS automatiquement si leur contenu déborde comme indiqué ici:
https://jsfiddle.net/9vyy620m/4/
Lorsque vous faites défiler, remarquez l'arrière-plan répétitif? Cela se produit car la hauteur de l'élément de corps n'a PAS augmenté en raison du débordement de sa table enfant. Pourquoi ne se développe-t-il pas comme tout autre élément de bloc? Je ne suis pas sûr. Je pense que les navigateurs gèrent cela incorrectement.
html {
height: 100%;
}
body {
min-height: 100%;
}
Le réglage d'une hauteur minimale de 100% sur le corps comme indiqué ci-dessus provoque d'autres problèmes. Si vous procédez ainsi, vous ne pouvez pas spécifier qu'un div ou une table enfant occupe une hauteur en pourcentage, comme indiqué ici:
https://jsfiddle.net/aq74v2v7/4/
J'espère que cela aide quelqu'un. Je pense que les navigateurs gèrent cela incorrectement. Je m'attendrais à ce que la taille du corps s'ajuste automatiquement de plus en plus si ses enfants débordaient. Cependant, cela ne semble pas se produire lorsque vous utilisez 100% de hauteur et 100% de largeur.