html - una - ¿Cómo hacer que la altura de la columna de arranque sea del 100% de la altura de la fila?

plantillas tablas responsive

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo puedo hacer que las columnas de Bootstrap tengan la misma altura? 30 respuestas

No he encontrado una solución adecuada para esto y parece muy trivial.

Tengo dos columnas dentro de una fila:

<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 altura de fila se establece por la fila más grande, left-side . Sin embargo, quiero que la altura del lado derecho sea la misma.

Esto parece intuitivo, pero no funciona

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

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

Answer 1

La respuesta de @ Alan hará lo que está buscando, pero esta solución falla cuando usa las capacidades de respuesta de Bootstrap. En su caso, está utilizando los tamaños xs para que no lo note, pero si utilizó algo más (por ejemplo, col-sm , col-md , etc.), lo entendería.

Otro enfoque es jugar con los márgenes y el relleno. Vea el violín actualizado: 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;
}

Answer 2

Puede resolver eso usando la tabla de visualización .

Here está el JSFiddle actualizado que resuelve su problema.

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>