Frage Wie wird die Bootstrap-Spaltenhöhe auf 100% Zeilenhöhe erhöht? [Duplikat]


Diese Frage hat hier bereits eine Antwort:

Ich habe dazu keine passende Lösung gefunden und es scheint so trivial.

Ich habe zwei Spalten in einer Reihe:

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

Die Zeilenhöhe wird durch die größere Zeile festgelegt, left-side. Ich möchte jedoch, dass die Höhe der rechten Seite gleich ist.

Dies scheint intuitiv, aber es funktioniert nicht

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

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


75
2017-08-08 22:30


Ursprung


Antworten:


Sie können das mit Hilfe lösen Anzeige Tabelle.

Hier ist der aktualisierte JSFiddle, der Ihr Problem löst.

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
2017-08-08 22:46



@ Alans Antwort wird tun, was Sie suchen, aber diese Lösung schlägt fehl, wenn Sie die reaktiven Funktionen von Bootstrap verwenden. In Ihrem Fall verwenden Sie die xs Größen, so dass Sie nicht bemerken, aber wenn Sie etwas anderes (z. col-sm, col-mdusw.), würdest du verstehen.

Ein anderer Ansatz ist es, mit Rändern und Padding zu spielen. Siehe die aktualisierte Geige: 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
2017-08-08 23:01