Bonjour !
J'ai une mise en page, a priori "simple" (je met des guillemets car cela
ne l'est visiblement pas), qui me pose des soucis :
Je cherche à obtenir une page composée de 3 "lignes" :
- Un en-tête de hauteur fixe
- Un menu et contenu de hauteur élastique (tout le reste de la hauteur
disponible)
- Un pied de page de hauteur fixe.
En d'autres termes, la ligne contenant le menu et le contenu doit
occuper la hauteur de la fenêtre moins la hauteur de l'en-tête moins la
hauteur du pied de page. Le pied de page étant donc "collé" sur le bas
de la fenêtre.
Seul le contenu peut avoir une barre de défilement quand le texte est
plus que la zone d'affichage. Les autres éléments (en-tête, menu, pied
de page) doivent toujours être visibles ne doivent pas bouger.
J'ai essayé de faire cela en CSS et DIV, mais je n'ai pas réussi à faire
en sorte que la hauteur des DIV menu et contenu s'adaptent
automatiquement en fonction de la hauteur de la fenêtre moins la hauteur
des deux autres DIV.
J'ai bien jeté un oeil sur
<http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS> mais je
n'y ai pas trouvé la solution (le 12e exemple s'en approche, mais c'est
le footer et non le contenu qui possède une hauteur élastique). Je n'ai
pas trouvé non plus le moyen de faire en sorte que ce soit le contenu
qui recoive cette hauteur élastique... :-/
Je me suis dit que j'allais faire "exception" (bien que sémantiquement,
ce soit nul), et de faire cela en tableau... mais sans succès : quand le
contenu est trop grand, au lieu d'avoir le scroll attendu dans la zone
du contenu, c'est le tableau qui dépasse de la fenêtre... :-(
Voici la page de test :
http://cjoint.com/data/dEsW5ERsmR.htm
Auriez-vous une piste à me donner pour mettre au point ce layout ?
De préférence sans tableau, sinon, en utilisant un seul tableau (pour ne
pas trop cochonner). Mais par dessus tout : sans frame et sans iframe !
D'avance merci pour vos lumières !
--
Bruno Baguette