Question

任何人都知道当组件视图发生变化时如何将页脚保持在被动组件的底部？我目前已将高度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" alt="logo">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;
  }

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

Answer 1

您可以使用nextTick来允许您在更改数据后VueJS根据您的数据更改来更新DOM

library(USAboundaries)
library(ggplot2)
library(sf)

c18 <- us_boundaries("1820-01-01")

c18spdf <- as(c18, "Spatial")

c18df <- fortify(c18spdf)

ggplot(c18df, aes(long, lat)) +
  geom_polygon(aes(group = group), colour = "grey50", fill = NA) +
  coord_quickmap()

Answer 2

请尝试使用这种方法将页脚放在here的底部

当Vue组件发生变化时，将页脚保持在页面底部

2 个答案: