微信小程序开发页面高度采用百分比自适应编程遇到的问题:page {height:100%}

在之前看到过一些文章写如何在微信页面开发中用百分比去实现自适应功能，于是在今天微信页面编写过程中采用了该方法，即使用 page {height:100%};
但是遇到了一些问题：
1、设置了高度为百分之百之后有部分内容被顶到顶部的导航栏里面去了，
因此设置margin-top,把它移了下来，如图：

2、但是接着写下去后，又有了新问题，如图：

下面的文字内容加长之后上面的内容又不见了，此时再尝试同样的方法用margin-top 也无济于事，只好删文字内容才能展现出上面的内容，

此时我就悟到了，height设置为百分之百，就会一直展现这全屏的内容，当内容超出屏幕之后就无法通过滑动展现出来（只是个人理解，或许大佬有其他解决办法）。
3、除上面两个问题之外还遇到一个问题就是页面写着写着突然顶部出现一处空白，通过可视化发现整个页面的容器下移，但是造成这个结果的原因一直未找出来。
因此，得出总结就是，对于一张完整的页面不需要滑动的，静止在那的就适合采用高度百分比自适应布局；如果是页面中有很多数据需要渲染出来并且通过上下滑动来看的话不适合用百分比的自适应布局，不过对于这种情况，我想到的解决方法是：在需要上下滑动渲染数据的地方可以放置swiper容器，而swiper容器的高度可以用百分比设置，数据在swiper容器中渲染，就能够进行滑动了。