[微信小程序][踩坑]scroll-view设置padding、子元素height:100%后的怪异表现

众所周知，在 html 中，下面的代码：

<div style="height: 100px; padding: 20px">
    <div class="inner" style="height: 100%"></div>
</div>

.inner的高度是100px。如果给外面的 div 设置 box-sizing: border-box，那么.inner的高度将会变成100px - 20px - 20px，也就是60px。

但是在微信小程序的 scroll-view 组件中却不同：

<scroll-view style="height: 100px; padding: 20px">
    <view class="inner" style="height: 100%"></view>
</scroll-view>

.inner的高度将会是100px + 20px + 20px = 140px。如果给外面的 div 设置 box-sizing: border-box，那么.inner的高度将会变成100px - 20px - 20px + 20px + 20px，也就是100px。

也就是说，scroll-view 的高度设置成 100% 后，它会忽略父容器的 padding，始终等于父元素的总高度，设置box-sizing: border-box 也不能够让它表现正常。

所以，如果你想要设置 scroll-view 直接子元素的高度为 100%，那么尽可能使用绝对长度，不要使用 100%。

END