Html5 让footer始终固定于底部

最近做项目遇到一个小问题，移动端底部会有一些固定的设计，要求固定在页面底部，同时要适配不同的手机。
最开始使用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始终会出现在屏幕底部的位置，且不会与内容重叠。