关于滚动条组件中height的设置问题

<template>
   <div class="home">
     <header class="g-header-container">
       <home-header/>
     </header>
     <me-scroll>
       <home-slider/>
       <home-nav />
       <home-recommend/>

     </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
     }
   }
</script>

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

   .swiper-container{
     over-flow: hidden;
     width: 100%;
     height: 100%;
   }
 }



</style>
<template>
   <div class="recommend">
     <h3 class="recommend-title">热卖推荐</h3>
     <ul class="recommend-list">
       <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';

 export default {
       name: "HomeRecommend",
   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;
                console.log(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>

只有将.swiper-container{
 over-flow: hidden;
 width: 100%;
 height: 100%;
}

中的height设为具体的数值px才能滑动页面，可是又会出现高于设定屏幕高度时的高度，那多出来的高度就只会显示背景色，重新将height改为100%，页面又无法进行滑动。。。

而且初次渲染会出现图片加载不出来的情况，换了一下屏幕的宽高比，图片才能加载出来