html - "display: table-cell"子项的 100% 高度

Question

我找到了一张定价表 HTML/CSS/JS，并决定尝试修改它以适应我对给定页面的需求。不幸的是，我有点碰壁了。以下 fiddle 是目前表格的 HTML 和 CSS 的基本示例:

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

为了使列在页面宽度上均匀分布，无论列数如何，我使用了 display:table、table-layout:fixed，和 display:table-cell。这非常有效，当我添加或删除列时，表格会根据需要进行调整以填充空间

现在的问题是当一列比其他列高时。我希望所有列都能拉伸(stretch)以匹配最高列的高度。

在 Chrome 检查器中查看时，我可以看到表格单元格已完全填满高度:

现在我只需要让这个表格单元格的子元素填充高度(在上面提供的 Fiddle 中，这将是 .price-wrapper - 它需要填充 .price-list li)

我都试过了:

1. 高度:100%
2. position:absolute；顶部:0；底部:0；左:0；右:0;

前者出于某种原因什么都不做，而后者将 .price-list 折叠到 0 像素高(因为唯一具有高度的 child 是绝对定位的，因此从流中移除)

如果我能让 .price-wrapper 正确地达到 .price-list li 高度的 100%，那么我就可以使用 display:table 和 display:table-row 将“立即购买”按钮推到底部并获得所需的外观:

Answer 1

一个解决方案是给 .price-list 100% 高度，.price-list > li 和 .price-wrapper 将 child 高度适合内容。

.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