vue2 js 让容器到最底部

在 Vue.js 中，如果你想让某个元素或者容器一直保持在页面底部，可以使用 Flexbox 或者 CSS Grid 结合 Vue 的动态数据绑定以及布局管理功能来实现。这里有一个简单的示例：

1. 使用 Flexbox:

<template>
  <div class="container">
    <div v-for="(item, index) in items" :key="index">{{ item }}</div>
    <div class="sticky-footer">这是底部内容</div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--footer-height));
}

.sticky-footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  height: var(--footer-height);
}
</style>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', '...'],
      // 假设 footer 高度为60px
      --footer-height: 60,
    };
  },
};
</script>

在这个例子中，`items` 数组的内容会填充整个容器，而 `sticky-footer` 将始终位于容器底部。

2. 使用 CSS Grid:

<template>
  <div class="container">
    <div v-for="(item, index) in items" :key="index">{{ item }}</div>
  </div>
  <div class="sticky-footer">这是底部内容</div>
</template>

<style scoped>
.container {
  display: grid;
  place-items: end; /* 顶部对齐内容，底部留空 */
  min-height: calc(100vh - var(--footer-height));
}

.sticky-footer {
  position: sticky;
  bottom: 0;
  height: var(--footer-height);
}
</style>

<script>
export default {
  data() {
    // ...
  },
};
</script>

同样地，你需要调整 `grid-template-rows` 和相应的高度计算，以适应你的实际需求。