Can someone help me with my Vue app? I need to figure out how to make the start page full screen without any scroll bars in the main window at any scale. The scrollbar should be located within "div class="bottom-center".
<script setup>
import Comp from './Comp.vue';
</script>
<template>
<div class="root">
<div style="font-size:30px">menu</div>
<Comp></Comp>
</div>
</template>
<style>
body {
box-sizing: border-box;
margin: 0;
}
.root {
display: flex;
flex-direction: column;
}
</style>
Comp.vue
<template>
<div class="container">
<div class="top-left" style="background:red">top-left</div>
<div class="top-center" style="background:blue">top-center</div>
<div class="top-right" style="background:green">top-right</div>
<div class="bottom-left" style="background:yellow">bottom-left</div>
<div class="bottom-center" style="background:white;overflow-y:scroll">
<div v-for="item in [1,2,3,4,5,6,7]" :key="item" style="height:150px">{{item}}</div>
</div>
<div class="bottom-right" style="background:grey">bottom-right</div>
</div>
</template>
<style>
.container {
display: grid;
grid-template-columns: 5rem 18rem 1fr;
grid-template-rows: 4rem 1fr;
grid-area: 'top-left top-center top-right' 'bottom-left "bottom-center bottom-right';
}
</style>