feat: sticky footer with calc (#847)

nuxt-themes · Mar 10, 2023 · fe85629 · fe85629
1 parent ec7e1c3
commit fe85629
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/components/app/AppFooter.vue b/components/app/AppFooter.vue
@@ -53,6 +53,8 @@ const nbSocialIcons = computed(() => (socialIcons.value ? socialIconsCount.value
 <style lang="ts" scoped>
 css({
   footer: {
+    display: 'flex',
+    minHeight: '{docus.footer.height}',
     borderTopWidth: '1px',
     borderTopStyle: 'solid',
     borderTopColor: '{elements.border.primary.static}',

diff --git a/components/app/AppLayout.vue b/components/app/AppLayout.vue
@@ -17,10 +17,22 @@ useContentHead(config.value as any)
 </script>
 
 <template>
-  <div>
+  <div class="app-layout">
     <AppLoadingBar />
     <AppHeader />
-    <slot />
+    <main>
+      <slot />
+    </main>
     <AppFooter />
   </div>
 </template>
+
+<style lang="ts" scoped>
+css({
+  '.app-layout': {
+    main: {
+      minHeight: 'calc(100vh - {docus.header.height} - {docus.footer.height})',
+    }
+  }
+})
+</style>
diff --git a/tokens.config.ts b/tokens.config.ts
@@ -13,7 +13,7 @@ export default defineTheme({
       ]
     },
     header: { height: '64px' },
-    footer: { padding: '{space.4} 0' },
+    footer: { height: { initial: '145px', sm: '100px' }, padding: '{space.4} 0' },
     readableLine: '78ch',
     loadingBar: {
       height: '3px',