css 怎么让某个盒子一直处于底部？

css 怎么让盒子一直处于底部如图，这样是正常的，没有问题：但我点“上箭头”后变成了

视图代码：

<div class="outerDiv">
  <div class="footer">
    &copy; 2024 By ailu &nbsp
    <a href="xxx" target="_blank">
      <img alt="GitHub" class="github" src="../../assets/GitHub.svg" width="30">
    </a>
  </div>
</div>

样式代码

.outerDiv{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}
.footer {
  width: 100%;
  background: #42ace8;
  color: white;
  text-align: center;
  margin-top: 400px;
  padding: 40px 0 40px 0;
  font-size: 18px;
}

点击“上箭头”触发的事件

const setUpDown = () => {
  if (upDown.value) {
    //  点击向上的箭头，修改高度为60px
    setProperty('--header-height','60px');
  }else{
    // 点击向下的箭头，修改高度为100vh
    setProperty('--header-height','100vh');
  }
  upDown.value = !upDown.value
}