我设置高度为100%后，会自动出现滚动条，请问去掉自动出现滚动条

Question

我希望router-view-container会自动填满页面剩下的空白，又不出现滚动条，请问如何才能实现？

<template>
    <div class="home-root">
        <MainHeader></MainHeader>
        <div class="router-view-container">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
import MainHeader from './modules/MainHeader.vue'
import Main from './modules/Main.vue'
export default {
    name: "Home",
    components: { MainHeader, Main }
}
</script>
<style scoped>
.home-root {
    height: 100%;
    background: #f5f5f5;
    background: darkgreen;
    box-sizing: border-box;
}
.router-view-container {
    height: 100%;
    /*height: 500px;*/
    background: #F56C6C;
 }
</style>

Answer 1

你这个router-view的100%高度要减去mainHeader的高度才对哦
比如：calc(100% - **px)

Answer 2

如下，前提是MainHeader自身有高度

.home-root {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.main-header {
    height: 200px;
}
.router-view-container {
    flex: 1;
}

Answer 3

上面那块东西导致的, 下面router-view-container就不要写100%了写个calc(100vh - 200px)