vuejs 应用程序中的粘性页脚

Question

我正在努力在我的 vuejs 应用程序中制作粘性页脚。

vuejs 和其他类似的框架，要求模板中存在一个根元素。

但这使得使用 Flex 添加粘性页脚变得困难。

没有根元素：

<div class="content">
  <h1>Sticky Footer with Flexbox</h1>
  <p>
    <button id="add">Add Content</button>
  </p>
</div>

<footer class="footer">
  Footer
</footer>

一切都适用，但对于根元素，则不行。

<div>
  <div class="content">
    <h1>Sticky Footer with Flexbox</h1>
    <p>
      <button id="add">Add Content</button>
    </p>
  </div>

  <footer class="footer">
    Footer
  </footer>
</div>

由于删除根元素不是一个选项，请问如何更新 css 以使用根元素？

提琴手

Answer 1

您可以将 an 设置id为外部div（例如id="app"）并使用您为 定义的 css 规则body：

<div id="app">
  ...
</div>

<div id="app">
  ...
</div>

https://jsfiddle.net/Low3fbs1/4/