css pleine hauteur?

Question

Je construis une page Web de 3 colonnes (en-tête & barre de menu au-dessus d'un nav gauche, la zone principale et la barre latérale droite avec un pied de pleine largeur sur le fond). J'ai des couleurs d'arrière-plan pour chaque colonne, mais elles sont coupées à la fin du texte au lieu de remplir toute la colonne. Y at-il un moyen de remplir toute la colonne qui ne repose pas sur l'utilisation d'une table (td)?

Voici mon CSS pour la mise en page générale:

#container 
{ 
    float: left; 
    width: 100%; /* IE doubles the margins on floats, this takes care of the problem */ 
    display: inline; /* this is where Ryan Brill (author of the ALA's article) and I go in "opposite directions" */ 
    margin-left: -200px; 
} 
#left 
{ 
    float: left; 
    width: 180px; /* IE doubles the margins on floats, this takes care of the problem */ 
    display: inline; 
    margin-left: 200px; 
    padding: 0px 0px 0px 5px; 
    background: url('/App_Themes/Default/images/RightColumnBackground.png') repeat left top; 
} 
#main 
{ 
    /* the width from #left (180px) + the negative margin from #container (200px) */ 
    margin-left: 380px; 
    padding: 0px 0px 0px 5px; 
} 
#sidebar 
{ 
    /* this is to keep the content of #sidebar to the right of #main even if the content of "main is shorter */ 
    padding-left: 100%; /* this is to "bring back" the #sidebar that has been moved out of the viewport because of the padding value */ 
    margin-left: -220px; 
} 

Je sais que je peux définir une hauteur dans le style, mais qui épingle la hauteur à un certain nombre de pixels. Y at-il une option de type height: fill;?

Answer 1

Ceci est un problème très commun. Une bonne approche consiste à utiliser faux columns.

Answer 2

Pas dans les CSS qui seraient actuellement largement supportés par les navigateurs, mais il y a ways of approximating it.

Answer 3

Ce dont vous avez besoin est Perfect Liquid Layout in Percentage widths, em widths ou pixel widths.