Full Page Layout with Bootstrap and Vue 3-CodePudding

I'm trying to create a Single Page Application with a simple layout of Header -> Content -> Footer using Vue3 and the Bootstrap 5 framework.

I am trying to get the Content to fill the space between header and footer and footer to flush to the bottom of page & content so there is no overlap. However the application just renders everything on the top half of the page leaving the bottom half a white space. I've tried a flexbox approach however something doesn't seem to be clicking right.

App.vue

<template>
  <div id="app">
    <div>
      <HeaderBar></HeaderBar>
      <div ><router-view></router-view></div>
      <FooterBar></FooterBar>
    </div>
  </div>
</template>

<script>
import HeaderBar from "@/components/HeaderBar.vue";
import FooterBar from "@/components/FooterBar.vue";

export default {
  components: {
    HeaderBar,
    FooterBar,
  },
};
</script>

<style>
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.content {
  background-image: url("../src/assets/background.png");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  flex-shrink: 0;
}
</style>

HeaderBar.vue

<template>
  <div>
    <header >
      <ul >
        <li >
          <a > Title </a>
        </li>
      </ul>
    </header>
    <nav
      
      aria-label="Tenth navbar example"
    >
      <div >
        <button
          
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarsExample08"
          aria-controls="navbarsExample08"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span ></span>
        </button>

        <div
          
          id="navbarsExample08"
        >
          <ul >
            <li >
              <router-link  style="font-size: 2em" to="/"
                >HOME</router-link
              >
            </li>
            <li >
              <router-link
                
                style="font-size: 2em"
                to="/about"
                >ABOUT</router-link
              >
            </li>
            <li >
              <router-link
                
                style="font-size: 2em"
                to="/gallery"
                >GALLERY</router-link
              >
            </li>
            <li >
              <router-link
                
                style="font-size: 2em"
                to="/cms"
                >CMS</router-link
              >
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</template>

<style scoped>
@font-face {
  font-family: "Mythical Snow";
  src: URL("../assets/fonts/MysticalSnow.ttf") format("truetype");
}

.heading {
  font-family: "Mythical Snow";
  font-size: 4em;
  color: #6a7363;
}

nav a {
  font-weight: bold !important;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #ffffe0 !important;
}
</style>

FooterBar.vue

<template>
  <div id="footer">
    <footer >
      <!-- Grid container -->
      <div >
        <!-- Section: Social media -->
        <section >
          <!-- Home -->
          <router-link
            to="/"
            
            role="button"
            ><i ></i
          ></router-link>

          <!-- About -->
          <router-link
            to="/about"
            
            role="button"
            ><i ></i
          ></router-link>
        </section>
        <!-- Section: Social media -->
      </div>
      <!-- Grid container -->

      <!-- Copyright -->
      <div  style="background-color: rgba(0, 0, 0, 0.2)">
        © 2022 Copyright:
        <a ></a>
      </div>
      <!-- Copyright -->
    </footer>
  </div>
</template>

<style scoped>
.icon {
  color: #ffffff;
}

.icon:hover {
  color: #000000;
}

footer {
  position: sticky;
  width: 100%;
}
</style>

CodePudding user response：

<style>
  #app {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 98vh;
     font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .content {
    /*  */
  }
</style>

<template>
      <HeaderBar></HeaderBar>
      <div ><router-view></router-view></div>
      <FooterBar></FooterBar>
</template>

Strip the two div's around HeaderBar and FooterBar in App.vue.

Remove all styles from body and put them into #app, add justify-content: space-between. With height: 100vh you'll get a scrollbar. Use 98 to avoid that.