vue项目里，为什么我设置高度为100%，底部会有一大片空白

Question

home.vue

<template>
    <div class="home-root">
        <MainHeader></MainHeader>
        <router-view></router-view>
    </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 {
    box-sizing: border-box;
 height: 100%;
 background: #F56C6C;
}
</style>

Main.vue嵌套在home.vue文件里面，MainListWrapper就是看到的那些列表内容，当列表的内容过长的时候，会在底部出现一大段白色，为什么？

Main.vue

<template>
 <div class="main-content-container">
 <div class="main-content">
 <div class="main-side-bar-container">
 <main-side-bar></main-side-bar> </div> <div class="main-list-container">
 <main-list-wrapper></main-list-wrapper> </div> </div> </div></template>
<script>
import MainSideBar from '../components/MainSideBar'
import MainListWrapper from '../components/MainListWrapper'
export default {
  name: "Main",
 components: {
    MainSideBar,
 MainListWrapper
  }
}
</script>
<style scoped>
.main-content-container {
  padding: 0 70px 0 70px;
 /*background: #e6a23c;*/
 min-height: 550px;
 display: flex;
}
.main-content {
  width: 100%;
 /*background: fuchsia;*/
 display: flex;
 /*height: 100%;*/
}
.main-side-bar-container {
  width: 196px;
 /*height: 100%;*/
 background: rgba(255,255,255,1);
}

Answer 1

看了你的代码，.home-root外层应该还是有parent的.

.home-root {
    height: 100%
}

这里height: 100%是指高度与外层parent高度保持一致。
所以你应该检查一下parent的高度。

其实这里最理想的做法应该是不设置高度，让<router-view></router-view>自动把高度撑开。