将 div 贴在等高卡片的底部

Question

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

.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: auto;"添加到'.card-contents'使卡片页脚贴在底部卡片。这是工作的 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/

将 div 贴在等高卡片的底部

Stick div at the bottom of equally height cards

css

flexbox

bulma