Comment etendre la hauteur d'un <div> jusqu'au footer de ma pa

Bonjour,

Je debute avec les css et la mise en page a base de <div> mais je me heurte deja au probleme suivant qui me parait insoluble malgré de longues recherches sur internet !

Le layout de ma page comporte 1 header, 3 colonnes et un footer, organises de la facon suivante:

<div top_banner > </div> 
<div content_zone> 
 <div menu></div> 
 <div center_content></div> 
 <div left content></div> 
</div> 
<div bottom_banner> </div>
 

Le probleme, c'est que je voudrais que le background de mon <div menu> ainsi que mon <div left content> se prolonge jusqu'a mon footer. Pour le moment, c'est ma colonne "center_content" qui descend le plus bas.

Mon css est le suivant:

div#top_banner { width: 810px; } 
div#content_zone {  height: 100% ; margin-top:5px ; margin-bottom:5px} 
div#menu { width: 160px; background: #444444; height:100%; margin-left:5px ; margin-right:5px ; float:left } 
div#center_content {  width: 420px; height:100%; margin-left:5px ; margin-right:5px ;  float:left } 
div#left_content {  background: #444444; width: 200px; height:100%; margin-left:5px ; margin-right:5px ;  float:left } 
div#bottom_banner {  width: 810px; } 
 

L'attribut height: 100% fonctionne a moitie: la hauteur du div est fixee a 100% de la fenetre du navigateur. Hors mon <div center_montent> est plus long que la fenetre, du coup, ma colonne du milieu descend tandis que la colonne menu et la colonne left_content s'arretent.
L'effet n'est pas tres heureux par rapport a mon footer, puisqu'il est collé a ma colonne du milieu tandis qu'il y a un vide entre le footer et les colonnes de gauche et droite.

Avec une table, c'est facile puisque la hauteur de la cellule se prolonge sur toute la hauteur de la ligne, il suffit de regler le background de la cellule pour qu'il remplisse tout l'espace jusqu'a la ligne suivante - mais avec le CSS je suis coincé. Merci d'avance pour votre aide.

Lothaire
Modifié par lruellan (21 Mar 2006 - 18:51)

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.



Pour répondre à ta question (très souvent posée, comme tu aurais pu le remarquer en faisant une recherche), je te suggère deux points de la FAQ qui devraient te dépanner ou te donner des pistes :
- http://forum.alsacreations.com/faq/#item17
- http://forum.alsacreations.com/faq/#item57

Bonne continuation

Desole... j'ai survole trop vite le FAQ.
Je vais regarder cela plus en detail. J'avais trouve le passage sur height:100% mais je n'arrivais pas a le faire fonctionner.

Merci !

lruellan a écrit :
Je debute avec les css et la mise en page a base de <div>

On peut faire une mise en page XHTML + CSS sans tableaux sans utiliser la moindre div. Une div n'est qu'un conteneur neutre (pas de "fonction" particulière autre que de grouper des éléments entre eux), sans mise en forme par défaut.

Dans certains cas, un simple titre, un paragraphe, ou une liste non ordonnée (pour un menu, par exemple) fera très bien l'affaire.

Pour le problème qui t'occupe, il faut savoir que des div ou tout autre conteneur de type bloc prendra en hauteur soit une hauteur fixe, soit la hauteur nécessaire pour englober son contenu. Un comportement de type "colonnes de tableau" est donc impossible (du moins en l'absence de support pour la propriété display:table-cell). Mais on peut toujours tricher visuellement.

Il y a un tutoriel CSS sur Alsacréations sur ce sujet. Je te laisse y jeter un coup d'œil.