[Vuejs]-Vuejs: sticky footer in mobile AND display view

by

0👍

We have a lot of ways to turn a footer sticky in bottom. You can try using a flex.

<body>
 <div class='container'></div>
 <div class='footer'></div>
</body>
<style>
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.container {
  flex: 1; //or 1 0 auto
}
.footer {
  flex-shrink: 0;
}
</style>

Very clean and fast.
Or you can try with reduced height…

.container {
  min-height: calc(100vh - 80px);
}
.footer {
  height: 60px;
}

Leave a comment