Fix footer, push down to bottom properly

src/App.vue

@@ -1,9 +1,10 @@
 <template>
     <div id="app">
+        <div class="wrapper">
             <b-navbar>
                 <b-navbar-brand>
                     <router-link :to="{ name: 'Home' }" class="no-link">
-                    The Office Quotes
+                        The Office
                     </router-link>
                     <b-badge v-if="showBreakpointMarker" style="font-size: 0.80rem;" class="mx-2" variant="dark">
                         <span id="marker-xs" class="d-sm-none">XS</span>
@@ -54,23 +55,33 @@
                         </b-col>
                         <b-col lg="8" xl="7" md="12" class="pt-md-2 pt-lg-0">
                             <router-view />
-                        <Footer :build-moment="buildMoment" />
                         </b-col>
                     </b-row>
                 </b-container>
                 <ais-configure :click-analytics="true" />
             </ais-instant-search>
+            <Footer :build-moment="buildMoment" />
+        </div>
     </div>
 </template>
 
 <style lang="scss">
-html, body {
+html, body, #app {
     min-height: 100vh;
+    height: 100%;
 }
 
 #app {
+    height: 100%;
     min-height: 100vh;
+
+    .wrapper {
+        min-height: 100%;
+        position: relative;
+        padding-bottom: 150px;
+    }
 }
+
 .ais-InstantSearch {
     height: 100%;
 }

src/components/Footer.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="footer-dark">
-        <footer>
+    <div class="outer-footer">
+        <footer class="inner-footer">
             <b-container>
                 <b-row style="text-align: center">
                     <ul>
@@ -47,10 +47,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.footer-dark {
-    margin-top: auto;
+.outer-footer {
+    height: 100px;
+    width:100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+}
 
-    padding: 50px 0;
+.inner-footer {
+    margin: 0 auto;
+    height: 100%;
     color: #6d6d6d;
 
     .build-time {