Pregunta ¿Cómo hacer que la altura de la columna de arranque sea del 100% de la altura de la fila? [duplicar]


Esta pregunta ya tiene una respuesta aquí:

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/


75
2017-08-08 22:30


origen


Respuestas:


Puedes resolver eso usando monitor mesa.

aquí es el JSFiddle actualizado que resuelve tu 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>

58
2017-08-08 22:46



La respuesta de @ Alan hará lo que está buscando, pero esta solución falla cuando usa las capacidades de respuesta de Bootstrap. En tu caso, estás usando el xs tamaños para que no lo note, pero si usó otra cosa (p. col-sm, col-md, etc.), lo entenderías.

Otro enfoque es jugar con los márgenes y el relleno. Ver 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;
}

24
2017-08-08 23:01