Comment rendre la hauteur de la colonne bootstrap à 100% de hauteur de ligne?

Je n’ai pas trouvé de solution appropriée à cela et cela semble si sortingvial.

J’ai deux colonnes dans une rangée:

sdfsdf

sdfsdf

sdfsdf

asdfdf

La hauteur de la ligne est définie par la plus grande ligne, à left-side . Cependant, je veux que la hauteur du côté droit soit la même.

Cela semble intuitif, mais ça ne marche pas

 .left-side { background-color: blue; } .something { height: 100%; background-color: red; } .row { background-color: green; } 

http://jsfiddle.net/ccorcos/jz8j247x/

Vous pouvez résoudre ce problème en utilisant la table d’ affichage .

Voici le JSFiddle mis à jour qui résout votre problème.

CSS

 .body { display: table; background-color: green; } .left-side { background-color: blue; float: none; display: table-cell; border: 1px solid; } .right-side { background-color: red; float: none; display: table-cell; border: 1px solid; } 

HTML

 

sdfsdf

sdfsdf

sdfsdf

sdfsdf

sdfsdf

sdfsdf

asdfdf

La réponse de @ Alan fera ce que vous cherchez, mais cette solution échoue lorsque vous utilisez les fonctionnalités réactives de Bootstrap. Dans votre cas, vous utilisez les tailles de xs afin que vous ne remarquiez pas, mais si vous avez utilisé autre chose (par exemple col-sm , col-md , etc.), vous comprendrez.

Une autre approche consiste à jouer avec les marges et le remplissage. Voir le violon mis à jour: http://jsfiddle.net/jz8j247x/1/

 .left-side { background-color: blue; padding-bottom: 1000px; margin-bottom: -1000px; height: 100%; } .something { height: 100%; background-color: red; padding-bottom: 1000px; margin-bottom: -1000px; height: 100%; } .row { background-color: green; overflow: hidden; }