"display: table-cell" 的 child 高度为 100%

Question

我找到了一个定价 table HTML/CSS/JS，并决定尝试调整它以适应我对给定页面的需求。不幸的是，我有点碰壁了。下面的fiddle是HTML和CSS目前table的bare-bones例子：

为了使列在页面宽度上均匀 space，而不管列数我使用了 display:table、table-layout:fixed 和 display:table-cell .这非常有效，当我添加或删除列时，table 会根据需要进行调整以填充 space

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

在 Chrome 检查器中查看时，我可以看到 table-cell 已完全填满高度：

现在我只需要 table-cell 的 child 填充高度（在上面提供的 Fiddle 中，这将是 .price-wrapper - 它需要填写 .price-list li)

我都试过了：

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

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

如果我能让 .price-wrapper 正确地达到 .price-list li 高度的 100%，那么我可以使用 display:table 和 display:table-row 来推动 "Buy now" 按钮到底部并获得所需的外观：

Answer 1

我有一个使用 jQuery 的解决方案。它是这样工作的。当页面加载时，它会查找每个列表并确定所有列表中最大的一个。然后它采用该高度并相应地拉伸其他高度。代码看起来像；

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

Here 是演示

Answer 2

一个解决方案是为 .price-list、.price-list > li 和 .price-wrapper 提供 100% 的高度，这将使子高度适合内容。

.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 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/

"display: table-cell" 的 child 高度为 100%

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

html

css

tablecell