HTML - 使用 flexbox 在表格行中定位页脚元素答案

【问题标题】：HTML - Position footer element in a table row with flexboxHTML - 使用 flexbox 在表格行中定位页脚元素
【发布时间】：2021-08-07 20:03:50
【问题描述】：

我正在尝试将我的元素 (.table-footer) 底部对齐在带有 flexbox 的表格中。我希望 table-footer 像这样粘在.table-row 的底部：

我试过了：

.table-footer {
  background-color: grey;
  bottom: 0;
}

.table-row {
    display: flex;
    flex-direction: column;
}

但我得到的是：

我尝试使用绝对位置和底部 0，但效果不佳...您能告诉我问题出在哪里吗？谢谢:)

您可以在这里尝试代码：https://jsfiddle.net/a5dubgfj/

【问题讨论】：

为什么不为页脚添加另一个tr？
您好，为了便于网页访问，它们是单行，每个页脚信息都与每一列相关
如果你离开整个 table 布局并使用 flex 设计它？
如果没有事件，我必须手动实现所有 ARIA 角色...您是否有 flex 中的示例表作为示例，每行都有这种页脚？

标签： html css html-table flexbox position

【解决方案1】：

你可以这样做

.table-footer {
  background-color: grey;
  bottom: 0;
}

.table-row {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 108px; //the height of the table row you have so far
}

可能有更好的方法来定义高度，但这对我有用

这里是 jsfiddle 链接：https://jsfiddle.net/8ubm96tk/

【讨论】：

谢谢！您对如何处理动态高度有什么建议吗？
取决于您的用例。如果你定义了这个表格所在的父 div 的高度，那么也许将表格和表格行的高度设置为 100%，这应该可以工作。