Hello everyone, I'm currently using my Vue router for multiple pages, and I'm facing an issue where setting the height of the main container to 100% within this media query is not working as expected:
@media screen and (min-width: 700px) {
#signinContainer {
height: 100%;
}
#signinContainer {
height: 520px;
}
#mainContainer{
height: 100%;
}
}
I have attempted to set the router component and the app itself to 100% height, but that did not solve the problem. I prefer not to specify a fixed height like 700px because I want it to adjust dynamically based on content.
I hope someone can spot what I might be doing wrong. Previously, I had a similar width issue which was resolved by adjusting the div width in the view, but the same approach hasn't worked for the height so far.
Here's a visual representation of the issue:
https://i.sstatic.net/3E3Jz.png
Below is the code snippet of my component:
<template>
<div id="mainContainer">
// Component contents here...
</div>
</template>
<style scoped>
// Styling information here...
</style>
And here is how I render the component in my view:
<template>
<div>
<Signin/>
</div>
</template>
<script>
import Signin from '@/components/Signin.vue'
export default {
name: 'signin',
components: {
Signin
}
}
</script>
<style scoped>
div{
width: 100%;
height: 100%;
}
</style>
Lastly, here is my app file containing the main router setup:
<template>
<div id="app">
<router-view id="router"/>
</div>
</template>
<style lang="scss" scoped>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
height: 100%
}
#router{
z-index: 0;
width: 100%;
height: 100%;
}
#nav {
padding: 30px;
}
#app div{
width: 100%;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>