Как прижать footer к нижней части экрана?

Question

[Anton8989]

Добрый день, необходимо, чтобы footer корректно отображался на различных размерах экрана (т.е был прижат к нижней части экрана). Заранее спасибо))

Comments

[alex]

необходимо

и?

vue тут при чем вообще?

[alex-1917]

Alex, ну наверное шоб було

Answer 1

[coderisimo]

вот вам 1001 способ.
https://css-tricks.com/couple-takes-sticky-footer/
простые примеры , можно поэксперементировать прямо в редакторе )

З.Ы. Только это css , а не js и vue.js :)

Comments

[alex-1917]

и это даже не джиквери)))

[coderisimo]

alex-1917, точно!

Answer 2

[Anton8989]

<div id="app">
  <header ref="header"></header>
  <section ref="content" class="content"></section>
  <footer ref="footer">
  </footer>
</div>

new Vue({
    el: "#app",
      mounted(){
           let header = this.$refs.header.offsetHeight
           let footer = this.$refs.footer.offsetHeight
           let win = window.innerHeight;
           let size = win - footer - header; 
           this.$refs.content.style.minHeight = win + "px"
        }
});