CSS将表推送到页面底部

Question

出于某种原因，我的（html）没有正确呈现我必须将表格＃footer推到底部。我有这样的情况：

<div id="container">
    <table id="footer"></table>
    <div id="text"></div>
</div>

是否可以在css中将第一个子元素推到底部而没有绝对位置？ 我需要在div＃text之后保留表。

Answer 1

考虑像这样的flebox和order：

#container {
  height:80vh;
  border:1px solid;
  display:flex;
  flex-direction:column;
}
#footer {
  order:1;
  margin-top:auto;
  border:1px solid green;
  height:20px;
  width:100%;
}
#text {
  border:1px solid orange;
  height:20px;
}

<div id="container">
    <table id="footer"></table>
    <div id="text"> text</div>
</div>