Vue组件更改时将页脚保留在页面底部

Posted 2023-02-23

【中文标题】Vue组件更改时将页脚保留在页面底部

【英文标题】：Keep footer at bottom of page when Vue component changes

【发布时间】：2017-12-20 14:54:06

【问题描述】：

有人知道当组件视图发生变化时如何将页脚保持在反应式组件的底部吗？我目前已将 height CSS 属性的内容设置为 100vh，该属性在首次加载时有效。但是，当我更改然后更改视图的状态时，页脚保持在同一个位置，而组件的高度随着我添加更多元素而增加。因此，页脚再次位于页面中间。这是组件模板：

<template>
  <div id="app">
    <div class="title-bar" data-responsive-toggle="navbar" data-hide-for="medium">
      <button class="menu-icon" type="button" data-toggle="navbar"></button>
      <div class="title-bar-title">Menu</div>
    </div>
    <div class="top-bar" id="navbar">
      <div class="top-bar-left">
        <ul class="menu">
          <li class="brand">
            <a href="url" >NAME</a>
          </li>
        </ul>
      </div>
      <div class="top-bar-right">
        <ul class="menu" v-if="this.$cookies.get('user')">
          <li><router-link class="link align-left" to="/sentences">Home</router-link></li>
          <li @click="logout"><a>Logout</a></li>
        </ul>
      </div>
    </div>

    <div class="content-wrapper">
      <router-view></router-view>
    </div>

   <!-- WHERE I AM HAVING THE ISSUE -->
    <footer>
      <p>&copy; 2017</p>
    </footer>

  </div>
</template>

CSS：

  footer 
    background-color: #333;
    height: 65px;
    padding: 20px;
  

  footer > p 
    margin: 0;
  

感谢您提供有关如何解决此问题的任何想法！

【问题讨论】：

你能发布一些额外的信息吗？什么是“***”类？你在用 Vue-Router 吗？

检查this codepen。你应该可以通过 flexbox 来实现，它不一定与 Vue 的使用有关。

抱歉，我正在使用带有 Vue 的 Zurb Foundation 框架。这基本上是他们的标题，我只是用它来设置类似于标题的样式。

你能再贴一些代码吗？最好也显示内容，而不是单独显示页脚？

抱歉花了这么长时间，但我改变了一些东西。这是内容

【参考方案1】：

您可以使用nextTick，它允许您在更改数据并且VueJS根据您的数据更改更新DOM后做一些事情

method: 

    this.$nextTick(() => 
      this.scrollToEnd();
    );

    scrollToEnd: function () 
    var messages = this.$el.querySelector(your component)
    messages.scrollTop = messages.scrollHeight

  
 

【参考方案2】：

请尝试使用此方法将页脚保持在here 的底部