Vue JS，页脚显示不正确

Question

我已经安装了vue cli，并在vue页面中添加了页眉和页脚组件 但他们正在一个接一个地 如何将页脚部分放在底部？

Home.vue

  <template>
  <div id="homepage">
    <app-header></app-header>
    <app-footer></app-footer>
  </div>
</template>
<script>
import Header from '../components/Header'
import Search from '../components/Search'
import Footer from '../components/Footer'
export default {
  name: 'homepage',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components: {
    'app-header': Header,
    'app-search': Search,
    'app-footer': Footer
  }
}

</script>
<style scoped>
a {
  color: #fff;
}

</style>

您可以看到使用了两个组件。

这是html

Answer 1

我们需要查看您的html，以便我们可以适当地帮助您。

Answer 2

屏幕截图，Home.vue代码和html源代码是3个完全不同的代码。

1. 在Home.vue中仅使用了标头组件
2. 屏幕截图包含所有内容-页眉，页脚，内容
3. 源代码仅包含页眉和页脚

Answer 3

Solved it using css

#footer p {
    font-size: 15px;
    color: #fff;
    padding-top: 1vw;
    padding-bottom: 1vw;
    bottom: 0px;
}