use css/flexbox rather than js for sticky footer

Saver3011 · Oct 21, 2021 · 973ce70 · 973ce70
1 parent 2f383ed
commit 973ce70
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 9 deletions.
diff --git a/assets/css/_main.scss b/assets/css/_main.scss
@@ -48,13 +48,20 @@ html {
 
 body {
   background-color: white;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
 
   @media (prefers-color-scheme: dark) {
     background-color: var(--tw-color-gray-900-experimental);
     color: var(--tw-color-gray-faint);
   }
 }
 
+main {
+  flex: 1;
+}
+
 .content {
   padding: var(--feather-grid-mega) 0;
 }

diff --git a/static/js/main.js b/static/js/main.js
@@ -30,15 +30,6 @@ function removeClassByClass(target, className) {
 }
 
 
-// Create sticky footer by defining min-height of site wrapper
-var site = document.getElementsByTagName("main")[0]
-var footer = document.getElementsByClassName("footer")[0]
-// Year in Review website does not have a footer
-if (footer) {
-    var footerHeight = footer.clientHeight
-    site.style.minHeight = "calc(100vh - " + footerHeight + "px)"
-}
-
 // Create DOM element for navigation bar
 var navBar = document.getElementsByTagName("nav")[0]