Div fix hauteur pour% colonnes

Question

sur la base que j'ai une page Web que j'ai commencé à l'adresse suivante: http://digitalgenesis.com.au/my%20sites/Digital%20Genesis/

Fondamentalement im après une mise en page 2 colonne avec 2 récipients de fluides qui affichent la couleur de fond vers le bas au pied de page régulièrement.

Pour le moment, cependant, la colonne de gauche affichera uniquement un arrière-plan autour de l'ammount du texte. Le code pour les 2 colonnes et son contenant div sont énumérés ci-dessous

#container{ 
overflow: hidden; 
width: 100%; 
} 

#col1{ 
float: left; 
width: 60%; 
background:red; 
} 

#col2{ 
float: left; 
width:40%; 
background:blue; 
} 

Je suis perplexe quant à la façon dont je peux obtenir la colonne de gauche affichant un fond rouge sur toute la longueur de la page

Dois-je avoir recours juste une barre latérale de largeur fixe pour le rendre plus facile?

Answer 1

see this example on jsFiddle. Cette approche fonctionne en traitant les arrière-plans séparément du contenu. Il introduit une div d'arrière-plan positionnée en absolu pour chaque colonne. Les arrière-plans sont positionnés derrière le contenu flottant à l'aide de pourcentages et dimensionnés pour remplir la hauteur du conteneur parent.

note: même si mon exemple est hébergé sur jsFiddle, cette méthode n'implique aucun javascript. Il utilise CSS seulement.

Answer 2

Faux Columns est une technique à suivre.

Mais personnellement, j'ai choisi d'utiliser javascript parce que c'est tellement facile.

$.fn.equalHeights = function(px) { 
    $(this).each(function(){ 
      var currentTallest = 0; 
      $(this).children().each(function(i){ 
        if ($(this).height() > currentTallest) { currentTallest = $(this).height(); } 
      }); 
      if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified 
      // for ie6, set height since min-height isn't supported 
      if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); } 
      $(this).children().css({'min-height': currentTallest}); 
    }); 
    return this; 
}; 

$ ('.égal-hauteur'). EqualHeights(); 95% de compatibilité pour des hauteurs égales est assez bon pour moi la plupart du temps. Sinon, j'utilise des fausses colonnes. Bien que je crois que ce problème devrait disparaître entièrement avec HTML5/CSS3 lorsque les navigateurs rattraper.