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

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