Div height : toute la place restante / ecran

Near -  
s.spark Messages postés 2528 Statut Contributeur -
Bonjour,

Je suis en train de réaliser un site web en xhtml et css, et je bloque sur un problème récurrent dans ce genre de language :

j'ai un header qui prend toute la largeur de la page et qui a une hauteur fixe.

je voudrais faire un div contenu avec un div menu à gauche, les deux indépendants (le menu pourra être plus long que le contenu par exemple). Mais surtout j'aimerais que mon menu descende au bas de ma page quelque soit la longueur du contenu

Exemple :
      ^           +------------------------------+     ^
200px |           | Header                       |     |
      v     ^     +------------------------------+     |
            |     | Menu  | Contenu              |     | 100%
 100%-200px |     |       |                      |     |
            |     |       |                      |     |
            v     +------------------------------+     v


Le menu n'est pas dans le div contenu et fera toujours la taille maximum.
Le contenu peut, lui, être d'une taille plus courte.

J'aimerais trouver une technique en CSS pour afficher le menu à la bonne taille. Je peux modifier la disposition de mes divs mais : normalement le contenu ne devrait pas dépasser l'écran, le menu en revanche, il est indispensable qu'il fasse cette taille ^o^'

Si quelques uns d'entre vous ont des idées ou des exemples de sites fonctionnant sur ce principe j'avoue que ça me retirerait une belle épine du pied... Merci beaucoup d'avoir pris le temps de me lire !

Near

oh, je suis tout à fait dispo sur mail ou msn/gtalk si besoin est.

1 réponse

s.spark Messages postés 2528 Statut Contributeur 618
 
Salut,

"j'aimerais que mon menu descende au bas de ma page quelque soit la longueur du contenu "

Oui mais si ton menu devient plus haut que la résolution d'écran (ou si le navigateur n'est pas en plein écran) du visiteur alors soit le texte vas sortir de son block, soit il y aura des scroll barres dedans.

Il y a bien le CSS min-height mais il n'ai pas supporté par IE6.

Si t'as avis de prendre la tête :

http://forum.alsacreations.com/faq/faq-57-Appliquer-une-hauteur-de-100-a-un-element.html
0