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以使用根元素？

JsFiddle

Answer 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/

粘性页脚在vuejs应用程序中

1 个答案: