Solve issue of footer not stretching correctly

ctrl-vi · ctrl-vi · commit f24bda98d451 · 2025-06-20T11:48:38.000-07:00
diff --git a/src/components/Footer.css b/src/components/Footer.css
@@ -9,6 +9,7 @@ footer {
     padding: 0.5em;
     margin: 0em;
     box-shadow: 0em 1em 2em black;
+    flex-shrink: 0;
 }
 
 footer p {
diff --git a/src/components/Layout.astro b/src/components/Layout.astro
@@ -74,10 +74,10 @@ const profile = ogType === "profile" ? [
     <body>
         <Header />
         <Navigation />
-        <div class="content">
+        <main class="content">
             <slot />
             <!-- This is where the page-specific content will go -->
-        </div>
-        <Footer class="footer" />
+        </main>
+        <Footer />
     </body>
 </html>
diff --git a/src/components/Layout.css b/src/components/Layout.css
@@ -12,19 +12,14 @@ html, body {
 body {
     display: flex;
     flex-direction: column;
-    min-height: 100%;
+    min-height: 100vh;
     box-sizing: border-box;
     overflow-y: auto;
     overflow-x: scroll;
 }
 
-.content {
-    flex: 1 0 auto;
+main {
+    flex: 1;
     padding: 1em;
     box-sizing: border-box;
-}
-
-footer {
-    flex-shrink: 0;
-    box-sizing: border-box;
 }
