卡片底部元素无法贴底的根本原因是容器缺乏定位上下文或可计算高度；应设position: relative并确保min-height/height/flex: 1，或用flex/grid布局替代absolute定位。
卡片内部的底部元素（比如按钮、标签栏）无法贴底，不是因为没写 bottom: 0，而是父容器没形成定位上下文或高度塌陷——这在 flex / grid 卡片中尤其容易被忽略。
卡片容器必须有明确高度或最小高度
卡片本身若靠内容撑高，position: absolute 的底部子元素会相对于整个文档流定位，而不是卡片内部。常见表现是按钮飘到页面最下方，而非卡片底边。
- 给卡片容器加
position: relative（这是absolute子元素的定位锚点） - 同时确保它有可计算的高度：比如
min-height: 200px、height: 100%（需父级也设高度），或用flex: 1在 flex 布局中拉伸 - 避免仅靠 padding/margin “模拟”高度，浏览器无法据此建立绝对定位边界
用 flex 实现卡片内底部对齐（推荐）
比 position: absolute 更健壮，无需关心定位上下文，且自动适应内容变化。但必须控制主轴方向和剩余空间分配。
- 卡片容器设
display: flex+flex-direction: column - 内容区（如
.card-body）加flex: 1，它会占满中间所有剩余空间 - 底部区域（如
.card-footer）自然沉到底部，不需额外样式 - 注意：如果卡片是 grid 子项或嵌套在其他 flex 容器里，
flex: 1可能失效——此时要检查父级是否限制了高度或设置了align-items: start
grid 方案下 footer 行高必须用 auto 或 fit-content
很多人写 grid-template-rows: 1fr auto 后发现底部没贴住，是因为第二行用了 minmax(60px, max-content) 这类弹性函数，导致网格线未严格对齐容器底边。
- 正确写法是
grid-template-rows: 1fr auto或1fr fit-content(60px) -
auto表示由内容决定高度，且不会撑开容器；fit-content()能限制最大高度，更安全 - 避免用
minmax(min-content, 1fr)这类组合，它会让 footer 行参与剩余空间分配，失去“固定底部”的语义 - 卡片若设了
overflow: hidden，而 footer 高度超预期，可能被裁切——建议加padding-bottom预留空间
移动端 fixed 按钮慎用在卡片内
在卡片里写 position: fixed; bottom: 0，实际效果是贴在视口底部，不是卡片底部。滚动时按钮会脱离卡片，甚至被虚拟键盘顶出屏幕。
- 除非你真想做一个悬浮于整个页面的快捷操作按钮，否则不要在卡片内部用
fixed -
position: sticky; bottom: 0在卡片内同样无效：sticky 只响应滚动容器的滚动，且只支持top和left锚定 - 真正需要“随卡片滚动但始终停在卡片底部”的场景，只能靠 flex 或 grid + 显式高度控制
最常被跳过的细节是：卡片容器是否真的“有高度”。很多开发者只给卡片加了 border 或 padding，却忘了它默认是 height: auto，而 auto 在绝对定位或 flex 分配中不等于“可用空间”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
