在写微信小程序时，经常会遇到页面需要上下滑动的需求，这个时候就需要用到scroll-view了，而使用scroll-view组件时必须设置它的高度，在页面顶部是一个导航栏，而底部的内容就需要滚动，这需要根据屏幕的高度来实时计算scroll-view的高度，我之前的处理方式是利用微信的WXML方法去实时获取顶部tab栏的高度，再实时计算出scroll-view的高度。这种方法既费时而且效果也不怎么好，后来我想可不可以用css来实现这个效果呢，一试果然可以。现在将css实现的思路记录如下:

1.设置scroll-view的父元素的的样式

{
    width:100%;
    height:100%;
    overflow:hidden;
}

2.设置scroll-view的样式

{
    width:100%;
    height:100%;
}

3.设置scroll-view中最后一个item的样式

{
    margin-bottom:tab栏的高度+item底部想留白的高度;
}

这样就实现了scroll-view组件自适应屏幕高度了，是不是很方便呢，比繁琐的计算简单多了，喜欢就点个赞吧

欢迎关注「不出户」公众号 

在公众号回复「python」，获取全套python学习资源。

在公众号回复「vue」，领取vue核心教程

在公众号回复「react」，领取react全套教程

在公众号回复「angular」，领取angular学习资源

在公众号回复「算法」，领取算法学习教程

在公众号回复「nodejs」，领取nodejs学习教程，更有更多精品资源敬请期待