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

【问题标题】：Stick div at the bottom of equally height cards将 div 粘贴在等高卡片的底部
【发布时间】：2018-10-31 04:16:07
【问题描述】：

我正在使用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 尝试了一些东西，但它们并没有真正的意义。关于我可以如何做到这一点的任何想法？

【问题讨论】：

然后尝试为块指定最小高度

标签： css flexbox bulma

【解决方案1】：

将 "flex: auto;" 添加到 '.card-contents' 以使卡片页脚贴在卡片底部。这是工作中的 jsfiddle link。

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

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

【讨论】：

谢谢。不幸的是，加载了布尔玛，这似乎不起作用。更新 CSS 后没有任何变化。
哦！在我的jsfiddle 中，我添加了 Bulma，它似乎有效，您能否分享一个有效的链接或其他内容？
你是绝对正确的。不知何故，我错过了一个结束 div 标记，因此没有正确应用样式。谢谢

【解决方案2】：

添加这个 CSS

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

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

【讨论】：