Can't stick footer to bottom in Vue.js

Question

I failed to stick my footer to the bottom. My Vue.js template below:

<template>
  <div id="homeDiv">
    <div class="wrapper">
      <div><SpFrontHeader/></div>
      <div class="content">
        <el-col :span="18">
          <h1>main-content</h1>
        </el-col>
        <el-col :span="6">
          <PriceFrame/>
        </el-col>
      </div>
      
    </div>
    <div class="Footer"><SpFrontFooter/></div>
  </div>

CSS Style:

<style scoped>
.wrapper{
  min-height: 80%;
  margin-bottom: 20%;
}
content{
  margin-bottom:20%;
}
.footer{
  width:100%;
  position: absolute;
  height: 20%;
}
</style>
</template>

It looks like this:

By the way, I used some of the element-ui components, but didn't use it's Container. What should do to fix it? THX

Answer 1

try like this:

.footer{
  width:100%;
  position: fixed;
  height: 20%;
  bottom: 0;
  left: 0;
}