Css Can'；在Vue.js中，不要将页脚粘到底

我没能把页脚粘到底。 我的Vue.js模板如下：

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

.包装纸{
最小高度：80%；
利润底部：20%；
}
内容{
利润底部：20%；
}
.页脚{
宽度：100%；
位置：绝对位置；
身高：20%；
}

看起来是这样的：

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

顺便说一下，我使用了一些元素ui组件，但没有使用它的容器。 我们应该怎么做才能修复它？THX

像这样试试：

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

---

这不就是把它推到屏幕底部而不是页面吗？还是我遗漏了什么？