如何使两个堆叠的div具有相同的高度答案

【问题标题】：How to makes two stacked divs have the same height如何使两个堆叠的div具有相同的高度
【发布时间】：2018-12-20 02:05:12
【问题描述】：

我正在制作一张卡片。该卡有两个堆叠的 div。卡片的顶部有一张图片，底部只有文字。我该怎么做才能确保顶部和底部 div 具有相同的高度？我知道我可以以像素为单位定义 div 的高度，但我不想这样做，因为我不知道其他卡片上会有多少文字。

.card {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cardTop, .cardBottom {
  border: 1px solid;
}

img {
  display: block;
}

<div class="card">
  <div class="cardTop">
    <img src="https://placehold.it/200x100" alt="">
  </div>
  <div class="cardBottom">
    <p>text of the card goes here</p>
  </div>
</div>

【问题讨论】：

.card div {height: 50px}
为具有不同祖先的元素设置相同的高度不能仅在 css 中完成。或者使用相同大小的图片。
使用 css flex box 或 javascript 来处理高度
除非卡片具有已知或可确定的高度，否则 flexbox 不能这样做。
还有... 还有哪些卡片？

标签： html css flexbox

【解决方案1】：

只需像这样使用 flex-box 的样式：

.card {
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-wrap: nowrap;

  padding: 5px;
  height: 15em; //chose what you want
  width: 15em;  //chose what you want
}

.card > div {
  flex: 1 1 50%;
  overflow: hidden;
}

通过这样做，您的 2 个 div 将在全局 .card 容器高度的 50% 处分割。

我在网上做了一个简单的例子：https://stackblitz.com/edit/angular-pechib

【讨论】：

我认为这里的重点是card的高度未知。
您可以在卡片类上使用网格，将网格模板行设置为 50% 50%，然后卡片顶部将有网格行：1；并且 cardBottom 将有 grid-row: 2;