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

Question

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
}

Answer 1

根据AI的答案，用margin-top: auto;

Answer 2

要使 .footer 盒子在 .outerDiv 内始终保持在底部，你可以使用 Flexbox 的 margin-top: auto; 代替固定的 margin-top: 400px;。margin-top: auto; 会将剩余的空间分配给 .footer 之前的元素，这样 .footer 就会被推送到 .outerDiv 的底部。

同时，由于你正在使用 CSS 变量来动态改变头部的高度，你应该确保这个高度变化不会影响到 .footer 的位置。这里假设你有一个 .header 元素，其高度由 CSS 变量 --header-height 控制。

首先，更新你的 CSS 样式：

.outerDiv {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}

.header {
  /* 假设这是你的头部元素，其高度由 CSS 变量控制 */
  height: var(--header-height); /* 初始值可以是 100vh 或其他值 */
  /* 其他样式... */
}

.footer {
  width: 100%;
  background: #42ace8;
  color: white;
  text-align: center;
  /* 使用 margin-top: auto; 而不是固定的 margin */
  margin-top: auto;
  padding: 40px 0;
  font-size: 18px;
  /* 其他样式... */
}

然后，确保你的 HTML 结构包含 .header 和 .footer 都在 .outerDiv 内：

<div class="outerDiv">
  <div class="header">
    <!-- 头部内容 -->
  </div>
  <!-- 其他内容... -->
  <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>

最后，你的 JavaScript 函数 setUpDown 应该可以正常工作，只要它正确地设置了 --header-height 变量，并且这个变量被 .header 的 height 属性所使用。

注意：在 JavaScript 中设置 CSS 变量时，你应该使用 document.documentElement.style.setProperty 或者如果你有一个具体的元素引用，可以直接在该元素上设置，例如 headerElement.style.setProperty。同时，确保你的 CSS 变量名称和你在 JavaScript 中使用的名称一致（在你的例子中是 --header-height）。