我想用小程序写一个音乐播放的界面，其中歌词滚动这一块单独包装了组件。其中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.wxml：

.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;
}