vue使用flex实现header和footer始终在页面顶部与底部

APP.vue的内容

<template>
  <div id="app">
    <!-- 头部 -->
    <v-header class="header"></v-header>
    <!-- 一级路由出口 -->
    <div class="layout main">
      <router-view />
    </div>
    <!-- 底部 -->
    <v-footer class="footer"></v-footer>
  </div>
</template>

<script>
import vHeader from "./components/header.vue";
import vFooter from "./components/footer.vue";
export default {
  name: "App",
  components: {
    vHeader,
    vFooter,
  },
};
</script>

<style scoped>
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.main {
  background-color: rgb(189, 219, 132);
  /* main 高度填充flex剩余高 */
  flex: 1;
}
</style>

最后

以上就是单薄酸奶为你收集整理的vue使用flex实现header和footer始终在页面顶部与底部的全部内容，希望文章能够帮你解决vue使用flex实现header和footer始终在页面顶部与底部所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。