100% height on child of “display: table-cell”

Question

I took a pricing table HTML/CSS/JS that I found and decided to try and bend it to fit my desires for a given page. Unfortunately I've hit a bit of a wall. The following fiddle is a bare-bones example of the HTML and CSS for the table at the moment:

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

In order to make the columns evenly space out across the width of the page regardless of the number of columns I used display:table, table-layout:fixed, and display:table-cell. This works perfectly and as I add or remove columns the table adjusts as necessary to fill the space

Now the problem is when one column is taller than the others. I would like all columns to stretch to match the height of the tallest one.

When looking in the Chrome inspector I can see that the table-cell has filled the height entirely:

Now all I need is for the child of this table-cell to fill the height (in the Fiddle provided above, this would be .price-wrapper - and it needs to fill .price-list li)

I have tried both:

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

The former does nothing for some reason, and the latter collapses .price-list down to 0 pixels tall (since the only children with height are absolutely positioned and therefore removed from the flow)

If I can get .price-wrapper to be properly 100% of the height of .price-list li then I can use display:table and display:table-row to push the "Buy now" button to the bottom and get the desired appearance:

Answer 1

some css changes

    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/

Answer 2

I have a solution using jQuery. It works like this. When the page loads, it looks for each list and determines the largest among all lists. Then it takes that height and stretches others accordingly. The code looks like;

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

Here is a demo

Answer 3

One solution is give 100% height to .price-list, .price-list > li and .price-wrapper will make child height fit to content.

.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;
}

Working Fiddle