My goal is to develop a Single Page Application using Vue3 and the Bootstrap 5 framework with a simple layout of Header -> Content -> Footer. I want the Content section to fill the space between the header and footer, ensuring there is no overlap. However, my current implementation renders everything on the top half of the page, leaving the bottom half as white space. I've experimented with a flexbox approach, but it doesn't seem to work correctly.
This is how my App.vue file looks:
<template>
<div id="app">
<div>
<HeaderBar></HeaderBar>
<div class="content"><router-view></router-view></div>
<FooterBar></FooterBar>
</div>
</div>
</template>
...
The HeaderBar.vue file contains:
<template>
<div>
<header class="bg-dark bg-gradient d-flex justify-content-center">
...
</nav>
...
</div>
</template>
...
Finally, the FooterBar.vue file consists of:
<template>
<div id="footer">
<footer class="bg-dark text-center text-white mt-auto">
...
</footer>
</div>
</template>
...