“display：table-cell”

Question

我拿了一张我发现的定价表HTML / CSS / JS，并决定尝试弯曲它以满足我对给定页面的需求。不幸的是，我碰到了一堵墙。以下小提琴是目前表格的HTML和CSS的简单例子：

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

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

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

查看Chrome检查器时，我可以看到表格单元格完全填满了高度：

现在我需要的是这个表格单元格的子节点填充高度（在上面提供的小提琴中，这将是.price-wrapper - 它需要填充.price-list li）

我试过了两个：

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

前者由于某种原因没有做任何事情，后者将.price-list折叠到0像素高（因为只有高度的孩子是绝对定位的，因此从流中移除）

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

Answer 1

一种解决方案是给予.price-list 100％的高度，.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

一些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/

Answer 3

我有一个使用jQuery的解决方案。它的工作原理如下。页面加载时，它会查找每个列表并确定所有列表中最大的列表。然后它需要这个高度并相应地拉伸其他人。代码看起来像;

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

Here 是演示