My Vue.js page structure consists of a navigation bar, main body content, and a footer:
<template>
<div class="flex_container">
<div class="container_navigation">
<nav-bar />
</div>
<div class="container_body">
<h1>{{ data.pages.home.heading }}</h1>
<p>{{ data.pages.home.about}}</p>
</div>
<div class="container_footer">
<pagefooter />
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import NavBar from '...';
import Pagefooter from '...';
import siteData from '...';
export default Vue.extend({
components: {
NavBar,
Pagefooter
},
mounted(){ },
computed: { },
data(){
return{
data: siteData
}
}
});
</script>
<style scoped>
.flex_container{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1px;
margin: 1px;
width: 100%;
}
.container_navigation{
flex-direction: row;
justify-content: center;
align-items: center;
padding: 1px;
margin: 1px;
width: 100%;
}
.container_body{
flex-direction: column;
padding: 2%;
margin: auto;
width: 100%;
}
.container_footer{
flex-direction: row;
padding: 1px;
margin: 1px;
width: 100%;
}
</style>
While trying various CSS tricks recommended in the complete guide to flexbox, I am facing two layout issues:
(i) The webpage does not stretch to fill the entire viewport. (ii) The footer is not sticking to the bottom of the page.
Despite ongoing styling adjustments, there is still a noticeable issue with the alignment of the footer as shown in the screenshot below: