1、首先要初始化样式(app.vue)
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
input,button{
border:none;
outline-style: none;
}
/*上边可自行定义*/
#app {
min-height: 100vh;/*最小高度*/
overflow:hidden;/*这里不写可能会导致底部出现白边或滚动条*/
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
</style>
2、页面中要动态计算高度(可以使用clientHeight、offsetHeight、innerHeight，具体根据实际情况)
<template>
<main class="mian_bg">
<div id="region" ref='bg_box' :style="{ height: bodyHeight + 'px' }">
<img id="bgPic" ref='bgpic' src="../../static/img/region.png" alt="背景图片" >
<ul id="textInde">
<li>
<span></span>
<input type="text" v-model="phone" maxlength="11" >
</li>
<li>
<span></span>
<input id="yzm" maxlength="6" v-model="code" type="text" >
<button id="sendyzm" @click="sendMsg()"></button>
</li>
<li id="btntype">
<button @click='sendregin()'></button>
</li>
</ul>
</div>
</main>
</template>
<script>
export default {
name:'regionphone',
data() {
return {
phone:'',
code:'',
bodyHeight:''
}
},
components: {
},
methods: {
},
mounted(){
this.bodyHeight = document.documentElement.offsetHeight;//注意：这里动态计算页面高度
}
}
</script>
<style scoped>
.mian_bg {
height: 100%;
background: url('../../static/img/bottomBanner.png') repeat-y;/*这里是为了填充底部白条区域*/
}
#bgPic {
width: 10rem;
margin: 0 auto;
}
#textInde{
position: absolute;
top:10.3rem;
width: 100%;
height: 6rem;
}
#textInde li{
height: 1rem;
margin: 0 0 .36rem;
}
#btntype{
margin-top: .8rem!important;
height: 2rem!important;
}
#textInde li>input{
width: 6.8rem;
font-size: 14px;
margin-left: 2.4rem;
display: inline-block;
height: 1rem;
background-color: transparent;
}
#yzm{
width: 3.8rem!important;
}
#sendyzm{
display: inline-block;
width:3rem;
height: 1rem;
vertical-align: middle;
background-color: transparent;
}
#btntype button{
display: inline-block;
width: 100%;
height: 100%;
cursor: pointer;
margin-top: -.3rem;
background-color: transparent;
}
</style>
