web-dev-qa-db-fra.com

Comment faire pour que bootstrap _ hauteur de la colonne soit 100% de la hauteur de la ligne?

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

J'ai deux colonnes dans une rangée:

<div class="row">
  <div class="col-xs-9">
    <div class="left-side">
      <p>sdfsdf</p>
      <p>sdfsdf</p>
      <p>sdfsdf</p>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="something">asdfdf</div>
  </div>
</div>

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/

htmlcsstwitter-bootstrap
80
Chet

Vous pouvez résoudre ce problème en utilisant la table display .

Ici est 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

<div class="row body">
        <div class="col-xs-9 left-side">
            <p>sdfsdf</p>
            <p>sdfsdf</p>
            <p>sdfsdf</p>
            <p>sdfsdf</p>
            <p>sdfsdf</p>
            <p>sdfsdf</p>
        </div>
        <div class="col-xs-3 right-side">
            asdfdf
        </div>
    </div>
58
Alan Souza

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 xs pour ne pas vous en rendre compte, mais si vous utilisiez autre chose (par exemple, col-sm, col-md, etc.), vous comprendriez.

Une autre approche consiste à jouer avec les marges et le rembourrage. 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;
}
24
Esteban