100% de altura en el niño de “display: table-cell”

Tomé una tabla de precios HTML / CSS / JS que encontré y decidí probar y doblarla para que se ajuste a mis deseos para una página determinada. Lamentablemente he golpeado un poco de una pared. El siguiente violín es un ejemplo escueto del HTML y CSS para la tabla en este momento:

https://jsfiddle.net/jv89hopf/1/

Para hacer que las columnas se espacien uniformemente en todo el ancho de la página, independientemente del número de columnas que use, display:table , table-layout:fixed , y display:table-cell . Esto funciona perfectamente y, a medida que agrego o quito columnas, la mesa se ajusta según sea necesario para llenar el espacio

Ahora el problema es cuando una columna es más alta que las otras. Me gustaría que todas las columnas se estiren para que coincida con la altura de la más alta.

Cuando miro en el inspector de Chrome puedo ver que la celda de tabla ha llenado la altura por completo:

Altura de la tabla de precios en el inspector de Chrome

Ahora todo lo que necesito es que el hijo de esta celda de tabla ocupe la altura (en el Fiddle proporcionado anteriormente, esto sería .price-wrapper ) y necesita llenar .price-list li )

He intentado ambos:

  1. height: 100%
  2. position: absolute; top:0; bottom:0; left:0; right:0;

El primero no hace nada por alguna razón, y el último se colapsa .price-list baja a 0 píxeles de alto (ya que los únicos niños con estatura están absolutamente posicionados y, por lo tanto, eliminados del flujo)

Si puedo obtener .price-wrapper para que sea correctamente el 100% de la altura de .price-list li entonces puedo usar display:table y display:table-row para presionar el botón “Buy now” hasta el fondo y obtener el deseado apariencia:

Altura deseada

Una solución es dar 100% de altura a .price-list , .price-list > li y .price-wrapper hará que la altura del niño se ajuste al contenido.

 .price-list { display: table; height: 100%; //Here list-style: outside none none; margin: 0; padding: 0; table-layout: fixed; width: 100%; } .price-list > li { display: table-cell; padding: 0 10px; height:100%; //Here } .price-wrapper { background-color: #fff; height: 100%; //Here list-style: outside none none; margin: 0; padding: 0; } 

Fiddle de trabajo

algunos cambios de CSS

  body { background-color: #999; } .monthly.is-visible { height: 100%; margin-bottom: 18px; position: relative; } .is-visible footer { background-color: #99c; bottom: 0; height: 30px; position: absolute; width: 100%; } .price-list { display: table; table-layout: fixed; width: 100%; height: 100%; margin: 0; padding: 0; list-style: none; } .price-list > li { display: table-cell; padding: 0 10px; height:100%; } .price-wrapper { background-color: #fff; list-style: none; height:100%; margin: 0; padding: 0; } .is-visible footer { width: 100%; height: 30px; background-color: #99c; } /* For demonstration purposes */ .is-hidden { display: none; } 

https://jsfiddle.net/jv89hopf/3/

Tengo una solución usando jQuery. Funciona así. Cuando se carga la página, busca cada lista y determina la más grande entre todas las listas. Luego toma esa altura y estira a los otros en consecuencia. El código se ve como;

 var height = 0; $("main").each(function( index ) { if(height<$(this).height()){ height = $(this).height() } }); $("main").height(height); 

Aquí hay una demostración