Make the footer be in the bottom of the page always, even if there is not enough content to push it down.

src/App.svelte

@@ -18,21 +18,25 @@
   }
 </script>
 
-<Navbar />
+<div class="page_container">
 
-<section class="section">
-  <div class="container is-fullhd">
-    <div class="columns">
-      <div class="column is-one-fifth">
-        <Sidebar bind:apiKey bind:sortedChats />
-      </div>
-      <div class="column is-four-fifths">
-        {#key $location}
-          <Router {routes} />
-        {/key}
+  <Navbar />
+
+  <section class="section">
+    <div class="container is-fullhd">
+      <div class="columns">
+        <div class="column is-one-fifth">
+          <Sidebar bind:apiKey bind:sortedChats />
+        </div>
+        <div class="column is-four-fifths">
+          {#key $location}
+            <Router {routes} />
+          {/key}
+        </div>
       </div>
     </div>
-  </div>
-</section>
+  </section>
 
-<Footer />
+  <Footer />
+
+</div>

src/app.scss

@@ -7,6 +7,18 @@
   }
 }
 
+.page_container {
+
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 100vh;
+
+  section.section{
+    flex-grow: 1;
+  }
+}
+
 .rotate {
   animation: rotating 10s linear infinite;
 }