小程序scroll-view 高度不起作用怎么解决？

Question

小程序写一个音乐播放的界面，歌词滚动单独包装成了组件，但是scroll-view的高度是想给70%但是没反应，目前高度就很长很长，甚至划到下一页。我想知道怎么把歌词的限制在这个黄色的框里。谢谢围观和建议！


components/lyric/lyric.wxml

<scroll-view hidden="{{isLyricShow}}" class="lyric-scroll" scroll-y scroll-top="{{scrollTop}}" scroll-with-animation="true">
  <view class="lyric-panel">
    <block wx:for="{{lrcList}}" wx:key="item">
      <view class="lyric {{index == nowLyricIndex?'hightlight-lyric': ''}}">{{item.lrc}}</view>
    </block>
  </view>
</scroll-view>

components/lyric/lyric.wxss

.lyric-scroll {
  width: 100%;
  height: 70%;
  color: #ccc;
  font-size: 32rpx;
}

.lyric-panel {
  position: relative;
  top: 50%;
}

.lyric {
  min-height: 64rpx;
}

.hightlight-lyric {
  color: #d43c33;
}

Answer 1

检查scroll view父级height是否有设置。父级没有height的话，就不好用%单位，可以使用vh 设置scroll view高度