如何让卡片高度一致并将购物按钮固定在底部

如上图所示，第一张卡片因标题过长被拉伸，导致第二张卡片高度随之被拉伸，但购物按钮未固定在底部。需求是无论卡片高度如何，都将按钮固定在卡片底部。

以下是几种实用的实现方案：

方案一：Flex 布局（推荐） #

给卡片容器设置垂直方向的弹性布局，让内容区域占据剩余空间，按钮自然被推至底部。

示例代码：

.card {
  display: flex;
  flex-direction: column;
  height: 100%; /* 确保卡片高度适配父容器或设置合适高度 */
}

.card-content {
  flex: 1; /* 让内容区域占满卡片剩余空间 */
}

.card-btn {
  margin-top: auto; /* 直接将按钮推至底部 */
}

方案二：Grid 布局 #

通过网格布局划分区域，让内容行占据剩余高度，按钮行自适应高度。

示例代码：

.card {
  display: grid;
  grid-template-rows: 1fr auto; /* 第一行内容占满剩余空间，第二行按钮自适应 */
  height: 100%;
}

方案三：绝对定位 #

给卡片容器设置相对定位，按钮设置绝对定位固定在底部，注意给内容区域预留底部内边距避免遮挡。

示例代码：

.card {
  position: relative;
  padding-bottom: 60px; /* 根据按钮高度调整，防止内容被按钮遮挡 */
  height: 100%;
}

.card-btn {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
}

内容的提问来源于stack exchange，提问作者The DST