VUX中x-header和tabbar因内容过长无法固定的问题

VUX中x-header和tabbar因内容过长无法固定的问题

vux官方文档中x-header和tabbar的定位方式分别是relative和absolute。文档中有给出解决方案，但觉得太麻烦，或者说我还没有get到精髓。
官方方案：结合view-box使用，给body，html加样式，还要设置所有父级div的height: 100%。我哪里知道有几个父级div？真叫人头痛。

个人方案

所以就琢磨一下，想到了overflow: scroll。我就把除掉header和tabbar的部分设置这个样式，高度用浏览器高度减掉这二者的高度。废话不都说，看效果图：

对比，发现二者，header和tabbar并没有移动，而中间的过长内容成功地滚动。

代码

废话少说，上代码：

<template>
    <div>
        <x-header :left-options="{showBack: false}">header</x-header>
        <router-view :style="routerViewClass"></router-view>
        <tabbar v-model="index">
            <tabbar-item>
                <span slot="label">tab1</span>
            </tabbar-item>
            <tabbar-item>
                <span slot="label">tab2</span>
            </tabbar-item>
            <tabbar-item>
                <span slot="label">tab3</span>
            </tabbar-item>
        </tabbar>
    </div>
</template>

<script>
import { XHeader, Tabbar, TabbarItem, ViewBox } from "vux"
export default {
    name: "Home",
    components: {
        XHeader, Tabbar, TabbarItem, ViewBox
    },
    props: {},
    data() {
        return {
            index: 0,
            routerViewClass: {
                height: "",
                overflow: "scroll"
            }
        }
    },
    watch:{
        index: {
            handler(newV, oldV) {
               	// 部分代码被删除
            },
            immediate: true
        }
    },
    computed: {},
    methods: {
        setHeight() {
            this.routerViewClass.height = window.innerHeight - 96 + "px"
            console.log(this.routerViewClass)
        }
    },
    created() {},
    mounted() {
    	// 在DOM加载后，执行，获得window的高度，并减去header和tabbar的高度，
    	// 96是自己在开发者模式看到的，header的height为 40，上下padding为 3，
    	// tabbar的height为 50
        this.setHeight()
    }
}
</script>

<style scoped>

</style>

这就是我的方法，大家如果想到了更好的方法，可以留言，教教我。