无法在 Vue.js 中将页脚粘贴到底部 [重复]

Question

我未能将页脚粘贴到底部。 下面是我的 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>

看起来像这样：

顺便说一下，我使用了一些element-ui组件，但没有使用它的Container。 应该怎么做才能修复它？谢了

Answer 1

试试这样：

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