Make footer always appear at bottom even if main content is not large…

… enough
jbtronics · Feb 10, 2025 · 7b00907 · 7b00907
1 parent 90cc8a3
commit 7b00907
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git a/assets/styles/frontend.css b/assets/styles/frontend.css
@@ -46,13 +46,6 @@ legend {
     white-space: normal;
 }
 
-.footer {
-    width: 100%;
-    height: 60px;
-    line-height: 60px;
-    background-color: #f5f5f5;
-}
-
 form .col-form-label.required:after, form label.required:after {
     bottom: 4px;
     color: var(--bs-secondary-color);
@@ -66,4 +59,22 @@ form .col-form-label.required:after, form label.required:after {
 /*** Make form-control placeholders italic ***/
 .form-control::placeholder {
     font-style: italic;
+}
+
+/** Layout to make footer stick to bottom */
+body {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+}
+
+main {
+    flex: 1 0 auto;
+}
+
+.footer {
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    background-color: #f5f5f5;
 }
diff --git a/templates/_footer.html.twig b/templates/_footer.html.twig
@@ -5,10 +5,8 @@
         <a href="https://www.stura.uni-jena.de/impressum.php">{% trans %}footer.impress{% endtrans %}</a>
         <a href="https://www.stura.uni-jena.de/datenschutz.php" class="ms-1">{% trans %}footer.privacy{% endtrans %}</a>
         <br>
-        <small class="text-muted">
-            <small>
-                <a href="https://github.com/jbtronics/StuRa-Finanzsoftware" class="text-muted" target="_blank">This software is open source and licensed under AGPL3 (developed by Jan Böhmer).</a>
-            </small>
+        <small class="text-muted" style="font-size: x-small">
+            <a href="https://github.com/jbtronics/StuRa-Finanzsoftware" class="text-muted" target="_blank">This software is open source and licensed under AGPL3 (developed by Jan Böhmer).</a>
         </small>
     </div>
 </footer>