移动端fixed布局兼容性不好，使用absolute布局来代替
程序员文章站
2022-07-10 21:33:53
在移动端使用fixed布局存在兼容性问题，因此使用absolute布局来代替 效果演示 src/app.vue里打好框架
头部导航
在移动端使用fixed布局存在兼容性问题，因此使用absolute布局来代替
效果演示
src/app.vue里打好框架
<template>
<div id="app" class="g-container">
<div class="g-header-container">
头部导航
</div>
<div class="g-view-container">
<div class="content">
内容区域
</div>
</div>
<div class="g-footer-container">
底部导航
</div>
</div>
</template>
<script>
export default {
name: 'app',
}
</script>
<style scoped>
.g-container{
position: relative;
width:100%;
height:100%;
max-width:640px;
min-width:320px;
margin:0 auto;
overflow:hidden;
}
.g-header-container{
position:absolute;
left:0;
top:0;
width:100%;
z-index:999;
height:64px;
background:pink;
}
.g-view-container{
height:100%;
padding-bottom:80px;
background:lightblue;
overflow:auto;
}
.content{
height:2000px;
}
.g-footer-container{
position:absolute;
left:0;
bottom:0;
width:100%;
box-shadow:0 0 10px 0 hsla(0,6%,58%,0.6);
height:80px;
z-index:999;
background:lightgreen;
}
</style>
在main.js里引入首页文件的样式index.scss
// the vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import 'babel-polyfill'
import fastclick from 'fastclick'
import vue from 'vue'
import app from './app'
import router from './router'
//给默认主页引入index.scss样式文件
import 'assets/scss/index.scss';
vue.config.productiontip = false
//给body元素设置fastclick
fastclick.attach(document.body);
/* eslint-disable no-new */
new vue({
el: '#app',
router,
components: { app },
template: '<app/>'
})
assets/scss/index.scss
*{
margin:0;
padding:0;
}
html,body{
// 必须设置，否则内容滚动效果无法实现
width:100%;
height:100%;
}