I'm currently working on a demo web application created with Vue 3, Vue Router, and Bootstrap using Vue CLI. My main issue is that the webpage does not extend to fill the entire height of the browser window.
My attempt to use bootstrap and set vh-100 on the top-level div did not achieve the desired result - instead of taking up the full visible viewport height, the content's minimum height was being matched vertically.
Any suggestions on how I can ensure my app layout adheres to Bootstrap's vh-100 property?
App.vue
<template>
<router-view/>
</template>
<script>
export default {
name: "App"
}
</script>
LoginPage.vue
<template>
<div class="vh-100 container" id="app">
<div class="row vh-25">
<div class="image-container row justify-content-center align-items-center">
<img src="../assets/images/pic.png" alt="picture">
</div>
</div>
<div class="row vh-75">
<EmailForm/>
</div>
</div>
</template>
<script>
import EmailForm from '@/components/EmailForm.vue'; // @ is an alias to /src
export default {
components: {
EmailForm,
}
}
</script>
<style>
.container {
margin: 0;
background: url(~@/assets/images/background_pic.jpg) repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.image-container {
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
}
img {
padding: 0;
display: block;
margin: 0 auto;
max-height: 60%;
max-width: 60%;
}
</style>