The bottom of the Mint UI layout exceeds


how to write to keep the bottom (tabbar) at the bottom all the time?
looks like there is no layout container! 

<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>
Vue.js mint-ui
Sep.19,2021

use position:fixed,. Try

< 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 >

not necessarily OK, give it a try

did not use this component library, add a fixed to try (encounter problems can first look at the documentation, components do not support the function and then find a way to achieve their own).
clipboard.png

Previous: Vue-amap reported an error Error in Wechat developer tool

Next: Canvas converted to base64 pictures cannot be saved by long press in Android

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bea63a-319eb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bea63a-319eb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?