滚动条组件中设置height为100%无法继承页面高度的问题

home/index.vue文件

<template>
<div class="home">
<header class="g-header-container">
<home-header/>
</header>
<me-scroll :data="recommends">
<home-slider/>
<home-nav />
<home-recommend @loaded="getRecommends"/>

</me-scroll>
<div class="g-backtop-container">

</div>
<router-view></router-view>
</div>
</template>

<script>
import HomeHeader from './header';
import HomeSlider from './slider';
import HomeRecommend from './recommend';
import MeScroll from 'base/scroll';
import HomeNav from './nav';
export default {
name: "index",
components:{
HomeHeader,
HomeSlider,
MeScroll,
HomeNav,
HomeRecommend
},
data(){
return {
recommends:[]
} ;
},
methods:{
updateScroll(){

},
getRecommends(recommends){
this.recommends = recommends;
}
}
}
</script>

<style lang="scss" scoped>
@import "~assets/scss/mixins";
.home{
overflow:hidden;
background-color: $bgc-theme;
height: 100%;
width: 100%;

}
</style>

scroll/index文件

<template>
<swiper
:options="swiperOption"
ref="swiper">
<swiper-slide>
<slot></slot>
</swiper-slide>
<div class="swiper-scrollbar" v-if="scrollbar" slot="scrollbar"></div>
</swiper>
</template>

<script>
import {swiper,swiperSlide} from 'vue-awesome-swiper';

export default {
name: "MeScroll",
components:{
swiper,
swiperSlide
},
props:{
scrollbar:{
type:Boolean,
default:true
},
data:{
type: [Array,Object]
}
},
data(){
return {
swiperOption: {
direction:'vertical',
slidesPerView: 'auto',
freeMode:'true',
setWrapperSize:true,
scrollbar:{
el:this.scrollbar ? '.swiper-scrollbar':null,
hide:true
}
}
}
},
watch: {
data (){
this.update();
}
},
methods: {
update() {
this.$refs.swiper && this.$refs.swiper.swiper.update();
}
}
}
</script>

<style lang="scss" scoped>
.swiper-container{
overflow: hidden;
width: 100%;
height:680px;
}
.swiper-slide{
height: auto;
}
</style>

home/recommend.vue文件

<template>
<div class="recommend">
<h3 class="recommend-title">热卖推荐</h3>
<div class="loading-container"
v-if="!recommends.length">
<me-loading/>
</div>
<ul class="recommend-list"
v-else>
<li class="recommend-item"
v-for="(item,index) in recommends"
:key="index">
<router-link
class="recommend-link"
:to="{name:'home-product',params:{id:item.baseinfo.itemId}}">
<p class="recommend-pic"><img class="recommend-img" v-lazy="item.baseinfo.picUrlNew"></p>
<p class="recommend-name">{{item.name.shortName}}</p>
<p class="recommend-origPrice"><del>￥{{item.price.origPrice}}</del></p>
<p class="recommend-info">
<span class="recommend-price">￥<strong class="recommend-price-num">{{item.price.actPrice}}</strong></span>
</p>
</router-link>
</li>
</ul>
</div>
</template>

<script>
import {getHomeRecommend} from 'api/home';
import MeLoading from 'base/loading';

export default {
name: "HomeRecommend",
components:{
MeLoading
},
created() {
this.getHomeRecommend();
},
data(){
return{
recommends: [],
curPage:1,
totalPage:1
}
},
methods:{
getHomeRecommend(){
if(this.curPage > this.totalPage){
return
};
getHomeRecommend(this.curPage).then(data => {
if(data){
this.curPage++;
this.recommends = [...this.recommends,...data.itemList];
this.totalPage = data.totalPage;
this.$emit('loaded',this.recommends);
}
})

}
}

}
</script>

<style lang="scss" scoped>
@import "~assets/scss/mixins";
.recommend {
&-title{
position: relative;
padding: 10px 0;
width: 100%;
font-size: $font-size-l;
text-align: center;

&:before,
&:after{
content: '';
position: absolute;
top:50%;
width: 40%;
height: 1px;
background-color: #ddd;
}
&:before{
left: 0;
}
&:after{
right: 0;
}
}
&-list{
@include flex-between();
flex-wrap: wrap;
}

&-item{
width: 49%;
background-color: #ffffff;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.12);
margin-bottom: 8px;
}

&-link{
display: block;
}

&-pic{
position: relative;
width: 100%;
padding-top: 100%;
}

&-img{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
&-name {
height: 36px;
padding: 0 5px;
margin-bottom: 8px;
line-height: 1.5;
@include multiline-ellipsis();
}

&-origPrice {
padding: 0 5px;
margin-bottom: 8px;
color: #ccc;
}

&-info {
@include flex-between();
padding: 0 5px;
margin-bottom: 8px;
}

&-price {
color: #e61414;
}

&-price-num {
font-size: 20px;
}

&-count {
color: #999;
}
}

.loading-container {
padding-top: 100px;
}

</style>