Fix footer to bottom of web page

SADiLaR · Apr 24, 2024 · f687096 · f687096
1 parent 4a03c1d
commit f687096
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/app/static/css/styles.css b/app/static/css/styles.css
@@ -11,8 +11,24 @@
 
 /*General*/
 body {
-    margin: 0;
     padding: 0;
+    margin-bottom: 60px;
+}
+
+html {
+    position: relative;
+    min-height: 100%;
+    padding-bottom: 60px;
+}
+
+.footer {
+    color: white;
+    background: var(--primary);
+    width: 100%;
+
+    position: absolute;
+    height: 60px;
+    bottom: 0;
 }
 
 .header-container {
@@ -81,12 +97,6 @@ body {
     color: var(--primary);
 }
 
-.footer {
-    color: white;
-    background: var(--primary);
-    width: 100%;
-}
-
 .footer > a {
     color: var(--primary-fg);
 }

diff --git a/app/templates/base.html b/app/templates/base.html
@@ -14,7 +14,7 @@
     <link rel="stylesheet" href="{% static 'css/styles.css' %}">
 </head>
 
-<body class="d-flex flex-column min-vh-100">
+<body>
 <!--header-->
 {% block app_header %}
 <header>
@@ -52,7 +52,7 @@
 </div>
 <br>
 <!-- app footer -->
-    <footer class="footer my-5 mt-auto">
+  <footer class="footer">
         <div class="text-center p-3">
           Developed by <a class="text-white" href="https://sadilar.org">SADiLaR</a>
         </div>