Footer always at the bottom of the page

Author: linkdotnet

src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor

@@ -1,10 +1,8 @@
 @inject AppConfiguration appConfiguration
 
-<div class="py-4">
-    <footer class="text-center container">
-        <span class="py-2 mb-0 text-muted">© @DateTime.Now.Year @CopyrightName</span>
-    </footer>
-</div>
+<footer id="footer" class="text-center">
+    <span class="py-2 mb-0 text-muted">© @DateTime.Now.Year @CopyrightName</span>
+</footer>
 @code {
     private string CopyrightName => appConfiguration.IsAboutMeEnabled
         ? appConfiguration.ProfileInformation.Name

src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor.css

@@ -0,0 +1,6 @@
+#footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 2.5rem;
+}

src/LinkDotNet.Blog.Web/Features/Home/Components/MainLayout.razor

@@ -2,11 +2,11 @@
 @inherits LayoutComponentBase
 
 <BlazoredToasts Position="ToastPosition.BottomRight" />
-<div class="position-relative">
+<div class="position-relative min-vh-100">
     <NavMenu/>
 
-    <main>
+    <main class="py-4">
         @Body
     </main>
-</div>
-<Footer></Footer>
+    <Footer></Footer>
+</div>