html - CSS 将表格推到页面底部

Question

出于某种原因，我的 (html) 没有正确呈现，我必须将 table#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>