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:

height: 100%
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:

you will need javascript to resize the height of the element unless you know the height of the tallest element so that you can apply it directly in CSS — Woody, Jan 09 '16 at 07:13
`min-height` had the same effect as `height` in this case - not directly solving the issue without also applying `height` to `.price-list` and `.price-list > li`. As for JavaScript, it is possible to solve this with JavaScript but a pure-CSS solution was preferable (and found) — stevendesu, Jan 09 '16 at 15:51

score 5 · Accepted Answer · answered Jan 09 '16 at 07:24

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

This worked and did not require changes to existing CSS. I was able to create the desired final output using this as a starting point: https://jsfiddle.net/jv89hopf/4/ — stevendesu, Jan 09 '16 at 07:41

score 1 · Answer 2 · answered Jan 09 '16 at 07:30

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/

score 0 · Answer 3 · answered Jan 09 '16 at 07:10

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

100% height on child of "display: table-cell"

3 Answers3

Linked