[Vuejs]-Sizing page to viewport and pinning footer to bottom with Flexbox in Vue

by

0👍

✅

The comments to this question were partially correct but not vue/nuxt specific!

The solution was first to edit the layouts/default.vue file to

<template>
  <div class="nuxt_container">
    <Nuxt />
  </div>
</template>

<style>
html {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',  Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  height: 100vh;
}

.nuxt_container{
  height: 100vh;
}

</style>

The crucial part here being setting height: 100vh;

The second modification was to use the layout on the pages… i.e. in pages/index.vue

export default Vue.extend({
  layout: 'default',
  components: {  },
  mounted(){   },
  computed: {  },
  data(){
    return{
    }
  }
});
</script>

Where layout: ‘default’ , or the name of whatever your layout file is, has been added/populated!

Leave a comment