vuejs应用程序中的粘性页脚[重复]

Posted 2023-03-06

【中文标题】vuejs应用程序中的粘性页脚[重复]

【英文标题】：Sticky footer in vuejs application [duplicate]

【发布时间】：2018-05-09 17:06:23

【问题描述】：

我正在努力在我的 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 以使用根元素？

JsFiddle

【问题讨论】：

只需将body 规则更改为body > div ...

【参考方案1】：

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

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

html, body 
  height: 100%;


#app 
  display: flex;
  flex-direction: column;
  height: 100%;

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

【讨论】：

效果很好！！