Mise en page : Header de hauteur fixe, contenu de hauteur élastique et foo ter de hauteur fixe
Le
Bruno Baguette
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/Modele...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
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/Modele...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
Poser une question
Il me semble me rappeler que j'avais fait un truc de ce genre-là, du
moins pour les navigateurs conformes, mais qui se dégradait plutôt bien
dans Internet Explorer. Il faudrait que je le retrouve, mais je ne pro-
mets rien car l'idée du pied de page avait finalement été abandonnée.
Ah non, ce n'est pas exactement pareil alors. En cas de dépassement de
la zone d'affichage (ce qui était rarissime avec les polices par défaut)
c'est toute la page qui gagnait un ascenseur. Enfin... je crois...
Bon, je vais voir si je retrouve ça par miracle dans les fichiers non
effacés, mais sinon tant pis.
Bon, j'ai décidément mauvaise mémoire car cela devait être ce que tu
cherches à faire, mais je crois que je ne retrouverai pas ce que j'avais
fait.
En revanche, tu peux peut-être t'inspirer de la norme elle-même :
http://www.yoyodesign.org/doc/w3c/c...ositioning
En particulier, #entete et #pied peuvent être en position fixed, mais
pour que ça se dégrade bien dans Internet Explorer 6 il faudrait que
le menu et le contenu soient dans le flux normal, avec pour le menu une
marge supérieure égale à la hauteur de l'en-tête, et pour le contenu
une marge inférieure égale à la hauteur du pied de page.
Les CSS n'ayant pas prévu d'autre cas que l'allongement automatique,
il ne reste que le JS pour fixer la hauteur résiduelle à confier au
"contenu" :
ça date un peu (2004) et possiblement il peut être trouvé plus élégant ?
Sinon pour la méthode Olivier :
--
sm
Olivier Miakinen nous narre ce qui suit en ce 31/03/2008 9:59 :
Le lien que j'ai donné ne répond pas à la question posée ?
Moz, Opera et IE 6.x affichent sans problème.
Cordialement,
--
docanski
Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
J'ai l'impression que si, mais je ne l'avais pas lu avant de faire ma
réponse. D'ailleurs il se trouve constituer un fil de discussion à lui
tout seul, et je ne comprends pas comment tu as fait pour répondre à
la question de Bruno plus de dix heures avant qu'il l'a posée... ;-)