vue项目中使footer始终保持底部的几种实现方法

在Vue 3和Vite项目中，实现底部footer保持在底部的方法有几种常见的方式：

1. 使用Flexbox布局:

这是最常用和推荐的方法，因为它简单且兼容性好。

<template>
  <div class="app-container">
    <header>Header</header>
    <main>Content</main>
    <footer>Footer</footer>
  </div>
</template>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}
</style>

2. 使用CSS Grid:

<template>
  <div class="app-container">
    <header>Header</header>
    <main>Content</main>
    <footer>Footer</footer>
  </div>
</template>

<style scoped>
.app-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
</style>

3. 使用绝对定位:

<template>
  <div class="app-container">
    <header>Header</header>
    <main>Content</main>
    <footer>Footer</footer>
  </div>
</template>

<style scoped>
.app-container {
  position: relative;
  min-height: 100vh;
}

main {
  padding-bottom: 50px; /* Footer的高度 */
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
}
</style>

4. 使用calc()函数:

<template>
  <div>
    <header>Header</header>
    <main>Content</main>
    <footer>Footer</footer>
  </div>
</template>

<style scoped>
main {
  min-height: calc(100vh - 100px); /* 100px是header和footer的总高度 */
}
</style>

最常用的方法是使用Flexbox布局（方法1）。它具有以下优点：

1. 简单易懂，代码量少。
2. 兼容性好，支持大多数现代浏览器。
3. 灵活性高，可以轻松适应不同的内容高度。
4. 不需要知道header和footer的具体高度。

无论选择哪种方法，都要确保在不同屏幕尺寸下测试布局，以确保footer始终保持在底部，同时内容不会被遮挡。