FAQ version Beta 0.5
Mise en page générale
Comment faire une mise en page de 100% de hauteur avec des parties fixes (en-tête, par ex) ?
Il n'y a pas de méthode simple pour dire à un élément d'occuper la hauteur restante (contrairement à la largeur).
Pour avoir, par exemple, un header (en-tête) de hauteur fixe et un bloc de contenu qui va s'adapter à la hauteur de page restante, la méthode la plus simple est d'utiliser une structure tabulaire, ou les propriétés CSS tabulaires (display: table-cell par exemple)… qui ne sont pas reconnues par IE.
EDIT : l'une des pistes est de simuler des "frames" en CSS à l'aide des positions fixed (un header et un footer en position fixed et un contenu avec un paddin-top et padding-bottom de la même valeur que les hauteurs de header et footer).
Le gros problème est que IE6 ne reconnaît pas la position fixed.
En utilisant un commentaire conditionnel, on peut créer une feuille de style spéciale pour IE6 :
Résultat et explications : http://www.456bereastreet.com/lab/cssframes/
A l'heure actuelle, la solution la plus simple à mettre en oeuvre (en raison des lacunes de certains navigateurs) est encore d'employer une mise en page à l'aide de tableaux.
Quelques pistes dans cette discussion :
http://forum.alsacreations.com/topic.php?fid=4&tid=1029&p=1
Pour avoir, par exemple, un header (en-tête) de hauteur fixe et un bloc de contenu qui va s'adapter à la hauteur de page restante, la méthode la plus simple est d'utiliser une structure tabulaire, ou les propriétés CSS tabulaires (display: table-cell par exemple)… qui ne sont pas reconnues par IE.
EDIT : l'une des pistes est de simuler des "frames" en CSS à l'aide des positions fixed (un header et un footer en position fixed et un contenu avec un paddin-top et padding-bottom de la même valeur que les hauteurs de header et footer).
Le gros problème est que IE6 ne reconnaît pas la position fixed.
En utilisant un commentaire conditionnel, on peut créer une feuille de style spéciale pour IE6 :
html {
overflow:hidden;
}
body {
height:100%;
overflow:auto;
}
overflow:hidden;
}
body {
height:100%;
overflow:auto;
}
Résultat et explications : http://www.456bereastreet.com/lab/cssframes/
A l'heure actuelle, la solution la plus simple à mettre en oeuvre (en raison des lacunes de certains navigateurs) est encore d'employer une mise en page à l'aide de tableaux.
Quelques pistes dans cette discussion :
http://forum.alsacreations.com/topic.php?fid=4&tid=1029&p=1
Liens complémentaires