100% высота на дочернем экране «display: table-cell»

Question

Я взял таблицу цен HTML/CSS/JS, которую я нашел, и решил попробовать и согнуть ее, чтобы соответствовать моим желаниям для данной страницы. К сожалению, я ударил немного о стену. Следующий скрипку является примером скелетного в HTML и CSS для таблицы на данный момент:

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

Для того, чтобы сделать колонны равномерно пространство по всей ширине страницы, независимо от количества столбцы I использовали display:table, table-layout:fixed и display:table-cell. Это работает отлично, и когда я добавляю или удаляю столбцы, таблица настраивается по мере необходимости, чтобы заполнить пробел.

Теперь проблема заключается в том, что один столбец выше других. Я бы хотел, чтобы все столбцы растягивались в соответствии с высотой самого высокого.

При поиске в инспекторе Chrome я могу видеть, что таблица-клетка заполнена высота целиком:

Теперь все, что нужно для ребенка этого стола-ячейки, чтобы заполнить высоту (в Fiddle приведенной выше, это было бы .price-wrapper - и он должен заполнить .price-list li)

Я попытался как:

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

Бывший ничего не делает по какой-то причине, а последние обвалы .price-list вниз до 0 пикселей в высоту (так как только дети с высотой позиционируются абсолютно и поэтому удаляются из потока)

Если я могу получить .price-wrapper, чтобы быть надлежащим образом 100% от высоты .price-list li, то я могу использовать display:table и display:table-row, чтобы нажать кнопку «Купить» и получить желаемый внешний вид:

Answer 1

Одно решение дать 100% высоту .price-list, .price-list > li и .price-wrapper сделает высоту ребенка прилегание к содержимому.

.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

Answer 2

У меня есть решение, использующее jQuery. Он работает так. Когда страница загружается, она ищет каждый список и определяет самый большой среди всех списков. Затем он принимает эту высоту и соответственно растягивает другие. Код выглядит так:

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

Here демонстрационный

Answer 3

некоторые изменения 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/