最近做项目遇到一个小问题,移动端底部会有一些固定的设计,要求固定在页面底部,同时要适配不同的手机。
最开始使用position:fixed的方法,适用于页面内容少且偏上的设计,如果主体内容过长可能会覆盖到底部的内容。
所以换了一个思路,将页面分成两个部分,上边是主体部分,下边是底部固定部分,话不多说,直接上代码
<template>
<div class="bg i-completed">
<div class="content"></div>
<footer> </footer>
</div>
</template>
<style lang="scss" scoped>
.bg {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.content {
box-sizing: border-box;
min-height: 100%;
padding-bottom: 1.24rem; // 注意与footer的margin-top height参数一致
}
footer {
height: 1.24rem;
margin-top: -1.24rem;
}
</style>
简单易懂,这样不管内容多少,footer始终会出现在屏幕底部的位置,且不会与内容重叠。