Comment etendre le background d'un <div> jusqu'au footer de ma page ?

Comment etendre le background d'un <div> jusqu'au footer de ma page ? - HTML/CSS - Programmation

Marsh Posté le 20-03-2006 à 21:48:13    

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 !
 
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>
 
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.
 
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% foctionne 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

Reply

Marsh Posté le 20-03-2006 à 21:48:13   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed