Extension d'un menu en hauteur

Bonjour,

Dans un projet actuel, le menu doit impérativement prendre toute la hauteur disponible entre le header [1]* et le footer [4]. Cette hauteur est déterminée par le contenu de la page [3].
Mais étant donné que mon menu [2], ne commence pas tout en haut de ma page, je ne puis utiliser de "height: 100%;". En effet, cela créé un décalage non désiré en bas de la page, égal à la hauteur du header.

Voici le schéma pour rendre mes explications plus claires:

http://pix.toile-libre.org/upload/original/1248897009.png

J'aimerai donc faire en sorte que mon menu prenne tout l'espace compris (en hauteur) entre le header et le footer, en fonction de la hauteur du contenu, et non en fonction du contenu du menu...

* Voir le schéma.

J'espère être suffisamment clair, si ça n'est pas le cas, n'hésitez pas à demander des éclaircissements.
Modifié par Mr.Yann (29 Jul 2009 - 22:10)

Salut,

lire Page sur toute la hauteur de la fenêtre, avec pied de page en bas.

Merci

Mais pourrais-tu être plus précis ? J'avais déjà lu cette page, et je n'y ai pas trouvé d'informations susceptibles de m'aider... Cette page m'a servi pour mon pied de page, mais dans le cas présent, je ne vois vraiment pas...

Comme tu pourras le voir dans les gabarits css de Alsacréations, tu peux utiliser la technique consistant à mettre le background de ton menu dans le background du contenu de ta page, ainsi on aura l'impression que le menu fait toute la hauteur mais en fait c'est seulement le contenu lui-même, la hauteur de ton menu sera "invisible".

Pour plus d'infos : http://www.alsacreations.com/static/gabarits/modele07.html

Mr.Yann a écrit :
J'avais déjà lu cette page, et je n'y ai pas trouvé d'informations susceptibles de m'aider... Cette page m'a servi pour mon pied de page, mais dans le cas présent, je ne vois vraiment pas...

Je pensais que ton problème était d'avoir le pied de page toujours en bas. Pour le reste il suffit d'utiliser les colonnes factices dont le gabarit 7 est effectivement un bon exemple.

Bonjour,

Désolé de n'avoir pas donné de nouvelles plus tôt, mais j'ai eu quelques problèmes d'informatique entretemps. Mais me revoila... avec le même problème.
J'ai beau essayer de comprendre le gabarit 7, impossible de l'appliquer sur mon design...
Voici une version simplifiée de mon design (je suis reparti de zéro en n'utilisant d'abord que des cadres de couleur):
http://onectin.fr/test/test.html

J'aimerai simplement que mon menu principal s'étende jusqu'au bas de la page (et non de l'écran), de même que mon corps, dont j'aimerai qu'il occupe la largeur et la hauteur restante de la page... J'avoue être un peu embrouillé avec toutes les techniques différentes trouvées sur internet ?

Auriez-vous quelques pistes ?

D'avance merci.

Alors quelques instructions:

1. Supprimer div#dernier-element, il ne sert à rien et ressemble plus à un déchet suite à divers essais.

2. Pourquoi figer la largeur de div#corps si justement tu veux qu'il prenne toute la largeur restante? Supprime ce width:200px, et ça ira mieux.

3. Pour les colonnes de même hauteur, il te faut appliquer la technique des colonnes factices. Deux ressources à ce sujet t'ont été indiquées: un article et un gabarit qui exploite cette technique. Tu as lu l'article, et tu l'as compris? Tu as examiné le gabarit, et tu as lu les commentaires explicatifs?
Ce qu'il faut retenir pour la technique des colonnes factices: c'est une technique de trompe-l'oeil. On n'arrive pas réellement à faire deux colonnes de même hauteur (qui plus est sur toute la hauteur de la page moins la hauteur de l'en-tête moins la hauteur du pied de page multiplié par l'âge du capitaine et le cycle de croissance des concombres de Patagonie); donc ce qu'on fait c'est qu'on utilise un élément qui lui prend bien toute la hauteur voulue (voire plus), et on lui applique une image de fond qui «peint» les colonnes.

Bonsoir.

La solution des colonnes factices est un bricolages trop limité pour moi. De ce que j'en ai compris, il s'agirait de répeter une image en fond correspondant (dans le gabarit 7) aux collones des côtés et au centre. Mais dans mon cas, il y a une séparation visible entre le header et la zone de l'article.

Je commence à m'arracher les cheveux, effaré que CSS ne réponde pas à un besoin si simple. Il y a toujours besoin de tricher, de bidouiller, c'est agaçant...

Amicalmement.
++

Bonjour,

Par exemple, dans un autre design que je dois faire, le tout a la forme suivante:
http://pix.toile-libre.org/?img=1249550302.png

Je ne vois vraiment pas comment les colonnes factices peuvent m'aider sur ce coup là. Et ça n'est pas faute de lire/relire.
L'un de vous a-t'il une suggestion pour ce cas de figure ?

Mr.Yann a écrit :
Je ne vois vraiment pas comment les colonnes factices peuvent m'aider sur ce coup là.

Elles peuvent dessiner les deux colonnes noires au centre, si tu ne veux pas passer par un tableau à deux cellules pour cela.

Elles peuvent aussi dessiner les bordures de gauche et de droite, mais là si c'est juste une grosse bordure noire ça se gèrera bien aussi avec un border-left et un border-right.

Bien sûr si le design contient des subtilités supplémentaires, ça change la donne.

Mr.Yann a écrit :
L'un de vous a-t'il une suggestion pour ce cas de figure ?

C'est un cas assez simple si on se fie au schéma. Il y a plusieurs options possibles. Reste à savoir si le schéma est fiable.

Quant au premier schéma donné, il y a une subtilité supplémentaire qui est qu'on veut remplir au minimum 100% de la hauteur du viewport avec trois blocs distincts. Ce genre de chose, c'est parfois jouable, mais ce genre de gestion fine de la hauteur n'est pas évidente en CSS. Il n'y a notamment pas de notion de calcul programmatique de dimensions (genre height: calc(100% - 250px);). Ça peut par contre se faire en JavaScript, ce qui n'est pas totalement idiot pour de l'optimisation esthétique devant prendre en compte un certain nombre de contraintes. Ou éventuellement avec un tableau de mise en page (ou son équivalent CSS si on se fiche de IE 6-7, ce qui n'est probablement pas le cas ), mais même là ça risque d'être tendu.