众所周知,在 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 组件中却不同:



.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

添加新评论