vue 设置footer在底部

要将 footer 设置在页面底部，可以使用 CSS 的 Flexbox 布局。以下是一个简单的示例：

<div id="app">
  <header>Header</header>
  <div class="main">Main content</div>
  <footer>Footer</footer>
</div>

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main {
  flex: 1;
}

footer {
  margin-top: auto;
}

这里的关键是将父容器 `#app` 设置为 `display: flex; flex-direction: column;`，并将 `div.main` 的 `flex` 属性设置为 `1`，以使其占据剩余的空间。最后，将 `footer` 的 `margin-top` 属性设置为 `auto`，以将其推到页面底部。