怎么让底部的技术支持在上面没有内容的时候位于底部

怎么让技术支持在没有内容的时候在蓝色框的位置，内容超过的时候在卡片后面呢

<div class="footer text-center">
      <p>交通运输行业能耗排放监测统计中心</p>
      <p>copyright © 2021能源科技发展有限公司</p>
</div>

<style lang="scss" scoped>
.footer {
  width: 100%;
  position: absolute;
  left: 0;
  p {
    font-size: 12px;
    color: #bcbcbc;
    margin: 10px 0;
  }
}
</style>

先将容器的position设为relative;
然后将这个div的的样式添加position:absolute; bottom:0;

position: sticky;
bottom: 0px;

试试这个定位方式

那你判断 有没有内容 。 给不同的样式

.footer{
  display:flex;
  bottom:0px;
}