Estire la altura div del niño para llenar el padre que tiene una altura dinámica

94

Como se puede ver en el siguiente violín, tengo dos divs, contenidos en un padre divque se han estirado para contener el div grande, mi objetivo es hacer que esos hijos divtengan la misma altura.

http://fiddle.jshell.net/y9bM4/

css html Khaled
fuente
2
revise esas preguntas: stackoverflow.com/questions/3049783/… , stackoverflow.com/questions/1575141/… , stackoverflow.com/questions/13609531/make-an-div-100-height-css
mrzmyr
@MikeHometchko hay muchos en CSS pero no en CSS3. Creo que sí.
Mr_Green
1
@Mr_Green las diferencias a un nivel fundamental entre "CSS" y CSS3 son triviales, así que no veo el problema. Este es un problema muy común que se ha preguntado y respondido hasta la muerte.
Mike H.
1
@MikeHometchko revisa mi solución. Estoy seguro de que nadie ha respondido lo mismo antes.
Mr_Green

Respuestas:

47

La solución es usar display: table-cellpara traer esos elementos en línea en lugar de usar display: inline-blocko float: left.

div#container {
  padding: 20px;
  background: #F1F1F1
}
.content {
  width: 150px;
  background: #ddd;
  padding: 10px;
  display: table-cell;
  vertical-align: top;
}
.text {
  font-family: 12px Tahoma, Geneva, sans-serif;
  color: #555;
}
<div id="container">
  <div class="content">
    <h1>Title 1</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.
      <br>Sample Text. Sample Text. Sample Text.
      <br>Sample Text.
      <br>
    </div>
  </div>
  <div class="content">
    <h1>Title 2</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.</div>
  </div>
</div>
Expandir fragmento

Violín de trabajo

SR verde
fuente
Sin embargo, esto no funciona si el elemento principal es una celda de tabla.
Tomáš Zato - Reincorporación a Monica
55

Úselo display: flexpara estirar su divs:

div#container {
    padding:20px;
    background:#F1F1F1;
    display: flex;
}

.content {
    width:150px;
    background:#ddd;
    padding:10px;
    margin-left: 10px;
}

JSFIDDLE

Trong Lam Phan
fuente
18

Agregue el siguiente CSS:

Para el div padre:

style="display: flex;"

Para div niño:

style="align-items: stretch;"
Ayan
fuente
Necesitaba agregar stretcha los niños para que la flexión funcionara para mí.
BadHorsie
4

https://www.youtube.com/watch?v=jV8B24rSN5o

Creo que puedes usar la pantalla como cuadrícula:

.parent { display: grid };
Gelo K
fuente
¿Probaste tu respuesta usando el mismo código del póster original?
Mark Stewart
Funciona y no requiere CSS en el niño. Eso es porque una celda de CSS Grid tendrá autofila y celda de forma predeterminada. En realidad, funciona bastante bien con IE si lo usa display: -ms-gridpara evitar algunos errores flexibles, siempre que solo tenga un hijo.
ShortFuse
-6

Puedes hacerlo fácilmente con un poco de jQuery

$(document).ready(function(){
  var parentHeight = $("#parentDiv").parent().height();
  $("#childDiv").height(parentHeight);
});
Levon Matevosyan
fuente
3
Aunque una vez que se cambia el tamaño de la ventana del navegador, esto se romperá, mientras que las CSS seguirán funcionando.
SharpC