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

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

Problems with the use of mint-ui components
read the mint-ui documentation, such as using the following component Toast( ); this.$toast ( prompt ) so that you can execute if the document is written as Toast ( prompt message ); it cannot be executed directly, or this.$Toast ( prompt me...

Vue.js mint-ui

Feb.28,2021
The index-list component of mint-ui, why can't v-for render it?
v-formt-cell ...

Vue.js mint-ui

Mar.01,2021
The effect is invalid after using swiper paging refresh in mint-ui.
seems to refresh the slidesPerView does not work, but the browser shows that the width of the slide is the width of the current device, rather than dividing the current width into three parts. Other parts of the project have also introduced...

Vue.js mint-ui

Mar.02,2021
How to get index by mint-ui cell-swiper
< H2 > I want to get the index, as shown in the figure and delete the corresponding item according to this index < H2 > how can it be realized? ...

Vue.js mint-ui

Mar.04,2021
Vue.js reported an error. The details are as follows.
specific errors are as follows: vue.esm.js?65d7:434 [Vue warn]: Invalid prop: type check failed for prop "value". Expected Array, got String. found in ---> <MtChecklist> <MtPopup> <Finish> at E: Caqm a...

Vue.js mint-ui

Mar.14,2021
The time component problem (cancel time) of the Mint Ui framework in the vue project?
after selecting a time, without clicking OK (click blank or click cancel), the new time values are generated into the pickerValue. How can I just click OK to generate a new time, click blank or cancel or the original time? Thank you! ...

Vue.js mint-ui

Mar.22,2021
How to clear the input content after vue mint-ui field input so that the current input box does not lose focus
the code is as follows <mt-field class="icon-mobile iconStyle BoxCenter verificStyle" placeholder="" type="tel" v-model="mobile" :attr="{ maxlength: 11 }"&g...

Javascript vue.js mint-ui

Mar.25,2021
How to use the swipe, of mint-ui to prohibit sliding from left to right and to achieve clickable switching
give me a simple or violent means. When using mint-ui s swipe, I want to switch between webcasts by clicking the outside button (I ve written this), but I want to disable its left-to-right sliding function. What s going on? Wait on the line! ...

Html5 vue.js mint-ui

Jun.11,2021
Mint-ui Datetime picker is blank on Android 8.0!
mint-ui Datetime picker controls display normally on other devices, but on high-version Android devices, only one picker-toolbar is displayed normally, and the content height also exists, that is, you can t see any data. who has encountered the same pro...

Vue.js mint-ui

Aug.23,2021
Use mint-ui to enter the page for the first time, and the data in the access area is also available, but it cannot be scrolled.
recently made a webapp, that uses mint-ui s ui framework; prepares the data before entering the page with picker, but when you enter the page, the data is displayed and cannot be scrolled. but click on each one to scroll who has stepped on th...

Webapp vue.js mint-ui

Sep.09,2021
I want to use the Cell Swipe component for the mint ui of vue, but half of it is displayed in the list before the left slide on the right. How to solve it?
problem description I want to use the Cell Swipe component for the mint ui of vue, but half of it is displayed in the list before the left slide on the right. How to solve it? the environmental background of the problems and what methods you have tr...

Vue.js mint-ui

Sep.24,2021
How to make datepciker appear on top of mintui?
use the dialog call in element-ui to open the datepicker, in mint-ui and the datepicker pops up under the dialog mask, as shown in the following figure do you have any solutions? ...

Vue.js mint-ui element-ui javascript

Nov.08,2021
How MintUi changes the style of Toast components
now it s a black background. I want it to be a different color. It s said in the manual that className can add a class name to it, but what happened when I tried it unsuccessfully? Document address Link description complete code <template> ...

Vue.js mint-ui

Feb.24,2022
Mint-ui loadmore does not recover after loading
transform BUG Code ...

Vue.js mint-ui

Jun.12,2022
VUE mint index-list plug-in IOS cannot be scrolled locally
1.VUE mint index-list plug-in IOS cannot scroll locally when scrolling, it will drive the search box down together <mt-index-list> <mt-index-section index="A"> <mt-cell title="Aaron">< mt-...

Vue.js mint-ui mint css

Jul.07,2022