Mint UI 布局底部超出

Question

咋样写让底部(tabbar)一直在底部?????
看了下好像是没有布局容器的!!!

<template>
    <div id="main">
        <mt-header title="首页">
            <router-link to="/" slot="left"><mt-button icon="back">返回</mt-button></router-link>
        </mt-header>
        <mt-cell title="标题文字" is-link v-for="n in 20">
            <span style="color: green">这里是元素</span>
        </mt-cell>
        <mt-tabbar v-model="selected">
            <mt-tab-item id="index"><img slot="icon" src="../../assets/img/100.png">首页</mt-tab-item>
            <mt-tab-item id="sign"><img slot="icon" src="../../assets/img/100.png">内容</mt-tab-item>
            <mt-tab-item id="content"><img slot="icon" src="../../assets/img/100.png">其他</mt-tab-item>
            <mt-tab-item id="user"><img slot="icon" src="../../assets/img/100.png">我的</mt-tab-item>
        </mt-tabbar>
    </div>
</template>

Answer 1

<template>
<div id="main">
<div style="height:90vh;overflow:auto">

<mt-header title="首页">
    <router-link to="/" slot="left"><mt-button icon="back">返回</mt-button></router-link>
</mt-header>
<mt-cell title="标题文字" is-link v-for="n in 20">
    <span style="color: green">这里是元素</span>
</mt-cell>

</div>

<div style="height:10vh;position:fixed;bottom:0;left:0">

<mt-tabbar v-model="selected">
    <mt-tab-item id="index"><img slot="icon" src="../../assets/img/100.png">首页</mt-tab-item>
    <mt-tab-item id="sign"><img slot="icon" src="../../assets/img/100.png">内容</mt-tab-item>
    <mt-tab-item id="content"><img slot="icon" src="../../assets/img/100.png">其他</mt-tab-item>
    <mt-tab-item id="user"><img slot="icon" src="../../assets/img/100.png">我的</mt-tab-item>
</mt-tabbar>
    

</div>
</div>
</template>

不一定行，试一试

Answer 2

利用 position:fixed，就可以了。楼主试试看

Answer 3

没用过这个组件库，加个fixed试试（遇到问题可以先看看文档哦，组件不支持的功能再想办法自己实现）。