2

I'm struggling with making a sticky footer work in my vuejs application.

vuejs and other framework like it, require that a root element be present in the template.

But this is making it difficult to use Flex to add a sticky footer.

without the root element:

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

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

everything works for, but with the root element, it doesn't. 

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

Since removing the root element is not an option, please how can I update the css to work with the root element?

JsFiddle

Pantelis Peslis
  • 14,930
  • 5
  • 44
  • 45
capiono
  • 2,875
  • 10
  • 40
  • 76

1 Answers1

6

You could set an id to the outer div (e.g id="app") and use the css-rules that you defined for body:

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

html, body {
  height: 100%;
}

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

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

Pantelis Peslis
  • 14,930
  • 5
  • 44
  • 45