众所周知，在 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

初次使用scroll-view，往往不能顺利滚动。

使用scroll-view时，滚动列表的项目必须设置为inline-block，还要设置white-space: nowrap：

- 阅读剩余部分 -