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

Question

我正在使用布尔玛有一列卡片，无论内容如何，​​它们都需要具有相同的高度。为了实现这一点，我创建了以下课程

.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链接。

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

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