Как сделать высоту столбца bootstrap до 100% высоты строки? [дубликат]

этот вопрос уже есть ответ здесь:

Я не нашел подходящего решения для этого и, кажется, так тривиально.

у меня есть два столбца в строку:

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

высота строки задается большей строкой, left-side. Однако я хочу, чтобы высота правой стороны была одинаковой.

это кажется интуитивным, но это не работает

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

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

2 76
html css twitter-bootstrap

2 ответа:

вы можете решить это с помощью дисплей таблица.

здесь это обновленный JSFiddle, который решает вашу проблему.

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

ответ@Alan будет делать то, что вы ищете, но это решение не работает, когда вы используете адаптивные возможности Bootstrap. В вашем случае, вы используете xs размеров, так что вы не заметите, но если вы использовали что-нибудь еще (например,col-sm,col-md и т. д.), Вы бы поняли.

другой подход-играть с полями и отступами. См. обновленный скрипку: 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