Les deux colonnes ont la même hauteur que la colonne la plus profonde?

Question

Si j'ai une disposition div comme ceci:

<div id="stretchyheader"></div> 
<div id="fixedwidthwide"><div> 
<div id="fixednarrow></div> 
<div id="footer"></div> 

Ce qui fait quelque chose comme ceci:

----------------------------------------------------- 
|   stretchyheader       | 
----------------------------------------------------- 
     |      |    | 
     |      |    | 
     | fixedwidthwide | fixednarrow | 
     |      |    | 
     |      |    | 
     |      | -------------- 
     |      |    
     |      |    
     |      |  patterned   
     |      |  background 
     ----------------------- 
        - footer - 

Comment puis-je assurer que les deux colonnes sont la même hauteur que la plus profonde colonne? Les hauteurs des colonnes sont flexibles en fonction de la quantité de contenu et ont un fond blanc.

Answer 1

Une manière très simple et commune d'utiliser Faux Columns.

Vous auriez une structure qui ressemblait quelque chose comme ceci:

<div id="stretchyheader"></div> 
<div id="container"> 
    <div id="fixedwidthwide"></div> 
    <div id="fixednarrow></div> 
</div> 
<div id="footer"></div> 

Et vous appliquer effectivement une image d'arrière-plan #container ajouter des couleurs d'arrière-plan, les frontières, etc. à chacune des 2 colonnes.

Il existe des techniques CSS pour le faire sans faire semblant, mais ils sont beaucoup plus complexes:

• http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
• http://matthewjamestaylor.com/blog/ultimate-2-column-right-menu-pixels.htm
• http://www.socialgeek.be/blog/read/flexible-equal-height-columns

Answer 2

Adapté de here:

Créer un récipient autour des deux colonnes fixes, et ont css quelque chose comme ceci:

#container { 
    float:left; 
    width:[sum of the two columns width]; 
} 
#fixedwidthwide { 
    float:left; 
    width:[whatever]; 
} 
#fixednarrow { 
    float:left; 
    width:[whatever]; 
} 

Notez que cela est nécessaire uniquement si les colonnes besoin d'être de la même hauteur pour une raison quelconque. Sinon, vous pouvez simplement suivre la suggestion de philfreo et utiliser des fausses colonnes.

Answer 3

Il y a un certain nombre de solutions à ce problème, y compris OneTrueLayout Technique, Colonnes Faux Technique et CSS tabulaires Display Technique.

La meilleure solution pour les colonnes de façon égale en hauteur ED est le CSS Tabular Display Technique que des moyens pour utiliser l'affichage : table fonction. Il travaille pour Firefox 2+, Safari 3+, Opera 9+ et IE8.

Le code pour la CSS tabulaires Afficher:

Le code HTML

<div id="container"> 
    <div id="rowWraper" class="row"> 
      <div id="col1" class="col"> 
       Column 1<br />Lorem ipsum<br />ipsum lorem 
      </div> 
      <div id="col2" class="col"> 
       Column 2<br />Eco cologna duo est! 
      </div> 
      <div id="col3" class="col"> 
       Column 3 
      </div> 
     </div> 
</div> 

Le CSS

<style> 
#container{ 
    display:table; 
    background-color:#CCC; 
    margin:0 auto; 
} 

.row{ 
    display:table-row; 
} 

.col{ 
    display: table-cell; 
} 

#col1{ 
    background-color:#0CC; 
    width:200px; 
} 

#col2{ 
    background-color:#9F9; 
    width:300px; 
} 

#col3{ 
    background-color:#699; 
    width:200px; 
} 
</style> 

Même s'il y a un problème avec l'auto l'expansion de la largeur de la table-cellule, il peut être résolu facilement en insérant un autre div avec la table-cellule et en lui donnant une largeur fixe. Quoi qu'il en soit, la surexpansion de la largeur se produit dans le cas de mots extrêmement longs (dont je doute que quelqu'un utiliserait, disons 600px mot long) ou de div dont la largeur est supérieure à la largeur de la cellule. Le Faux Column Technique peut être une solution à ce problème, mais il présente certains inconvénients, notamment: vous devez redimensionner l'image en mosaïque d'arrière-plan si vous souhaitez redimensionner les colonnes et ce n'est pas non plus une solution élégante. Le OneTrueLayout TechniqueOneTrueLayout Technique consiste à créer un fond de rembourrage de très grande hauteur et à le couper en ramenant la position réelle de la bordure à la "position logique normale" en appliquant une marge négative de la même valeur énorme et en masquant le étendue créée par le remplissage avec dépassement: masqué appliqué à l'enveloppe de contenu. Un exemple simplifié serait:

Le fichier HTML:

<html><head> 
<style> 
.wraper{ 
    background-color:#CCC; 
    overflow:hidden; 
} 

.floatLeft{ 
    float:left; 
} 

.block{ 
    padding-bottom:30000px; 
    margin-bottom:-30000px; 
    width:100px; 
    background-color:#06F; 
    border:#000 1px solid; 
} 
</style> 
</head> 
<body> 
    <div class="wraper"> 
    <div class="block floatLeft">first col</div> 
     <div class="block floatLeft"> 
       Second col<br />Break Line 
     </div> 
    <div class="block floatLeft">Third col</div> 
</div> 
</body> 
</html> 

À mon avis, la inappliquées hauteur de 100% dans un conteneur en hauteur automatique est un inconvénient majeur et le W3C devrait envisager de réviser cet attribut.

Autres ressources: link1, link2, link3, link4, link5 (important)