css - 将 div 粘贴在等高卡片的底部

Question

我正在使用 Bulma有一列卡片，无论内容如何，​​都需要具有相同的高度。
为了实现，我创建了以下类

.equal-height
  display: flex
  flex-direction: column
  height: 100%

我的 HTML 看起来像

<div class='columns is-multiline'>
  <div class='column is-one-fifth'>
    <div class='card equal-height'>
      <div class='card-content'>
        # CONTENT GOES HERE
      </div>
      <div class='card-footer'>
        # FOOTER GOES HERE
      </div>
    </div>
  </div>
  <div class='column is-one-fifth'>
    <div class='card equal-height'>
      <div class='card-content'>
        # CONTENT GOES HERE
      </div>
      <div class='card-footer'>
        # FOOTER GOES HERE
      </div>
    </div>
  </div>
</div>

产生类似的东西



现在我正在尝试制作 card-footer像下面一样粘在卡片的底部。



我用 flex 尝试了一些东西但它们真的没有意义。
关于我如何做到这一点的任何想法？

Answer 1

添加 “flex :自动；” 至 '.card-contents' 使卡片页脚粘在卡片的底部。这是工作中的 jsfiddle link .

.equal-height {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.equal-height .card-content {
  flex: auto;
}