将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

在'。card-contents'中添加“ flex：auto;” ，以使页脚停留在卡的底部。这是工作中的jsfiddle link。

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

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

Answer 2

添加此CSS

.card-footer {
  margin-top: auto;
}

工作演示：https://jsfiddle.net/baLg7940/