Looking for a solution to create a sticky footer that works on both desktop and mobile views without overlapping the main content? The current code either overlaps or doesn't stick to the bottom. Seeking a responsive approach.
App.vue:
<template>
<div id="app">
<NavbarComponent/>
<router-view/>
<FooterComponent/>
</div>
</template>
<script>
import NavbarComponent from "./components/Navbar"
import FooterComponent from "./components/FooterComponent"
export default {
name: "App",
components: {
NavbarComponent,
FooterComponent
}
}
</script>
<style>
body {
min-height: 100vh;
position: relative;
margin: 0;
}
</style>
FooterComponent.vue:
<template>
<footer>
<p class="text-center">Some random text for the footer.</p>
</footer>
</template>
<script></script>
<style scoped>
footer {
color: white;
background-color: #003459;
position: absolute;
bottom: 0;
width: 100%;
margin-top: 50px;
}
</style>