Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Mise en page : Header de hauteur fixe, contenu de hauteur élastique et foo ter de hauteur fixe

9 réponses
Avatar
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/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

9 réponses

Avatar
Olivier Miakinen
Le 30/03/2008 19:14, Bruno Baguette a écrit :

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.



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.

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.



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.
Avatar
Olivier Miakinen
Le 30/03/2008 22:22, Olivier Miakinen a écrit :

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.



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, 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/css2/visuren.html#fixed-positioning

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.
Avatar
SAM
Olivier Miakinen a écrit :
Le 30/03/2008 22:22, Olivier Miakinen a écrit :
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.





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/css2/visuren.html#fixed-positioning

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" :
<http://www.pompage.net/pompe/pieds/&gt;
ça date un peu (2004) et possiblement il peut être trouvé plus élégant ?

Sinon pour la méthode Olivier :
<http://www.pompage.net/IMG/html/page_modele12.html&gt;
<http://www.pompage.net/pompe/cssdezero-9/&gt;
<http://www.pompage.net/articles&gt;

--
sm
Avatar
docanski
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
Olivier Miakinen nous narre ce qui suit en ce 31/03/2008 9:59 :

En particulier, #entete et #pied peuvent être en position fixed, mais
pour que ça se dégrade bien dans Internet Explorer 6



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/
Avatar
Olivier Miakinen
Le 31/03/2008 12:08, docanski a écrit :

Le lien que j'ai donné ne répond pas à la question posée ?



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... ;-)
Avatar
docanski
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
Olivier Miakinen nous narre ce qui suit en ce 31/03/2008 12:40 :
Le 31/03/2008 12:08, docanski a écrit :
Le lien que j'ai donné ne répond pas à la question posée ?



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... ;-)



J'aurais aimé pouvoir répondre que je suis capable de me projeter dans
le temps. :-)
Mais non, ça aurait été trop beau ...
La pile de ma carte-mère est en fin de vie et ne mémorise plus certains
paramètres : depuis quelques jours, chaque fois que j'allume le PC, j'ai
quelques heures de retard et j'avais oublié de remettre le système à
l'heure quand j'ai répondu :-(
Par contre, je suis étonné qu'il constitue un fil de discussion à lui
tout seul chez toi : chez moi, il est dans le fil initié par Bruno. Les
mystères des serveurs de "news" ...

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/
Avatar
Thierry B.
--{ Olivier Miakinen a plopé ceci: }--

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... ;-)



$ man ipot
# modprobe ipot

--
"Le touriste, maintenant, il voudrait internet au gite. Mais pourquoi il
vient ici pour faire de l'internet ? C'est pas plus beau que des filles
à poil, ici ?"
Avatar
Olivier Miakinen
Le 31/03/2008 15:59, Thierry B. a écrit :

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... ;-)



$ man ipot
# modprobe ipot



Sympa : <http://kadreg.org/ipot/&gt;
Avatar
Sergio
docanski a couché sur son écran :

La pile de ma carte-mère est en fin de vie et ne mémorise plus certains
paramètres : depuis quelques jours, chaque fois que j'allume le PC, j'ai
quelques heures de retard et j'avais oublié de remettre le système à l'heure
quand j'ai répondu :-(



Ça se change...
Trouvé à 1€ la douzaine au marché...

--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org