Sticky footer

validata_ui/static/validata.css

+/* VALIDATA stylesheet based on bootstrap */
+html {
+  position: relative;
+  min-height: 100%;
+}
+
+body {
+  font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto,
+    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  /* margin-bottom by footer height + footer top margin */
+  margin-bottom: 245px;
+}
+
+.footer {
+  /* sticky footer */
+  background-color: #f5f5f5;
+  padding: 3em;
+  /* margin-top: 5em; */
+  height: 215px;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}

validata_ui/templates/base_template.html

@@ -10,19 +10,9 @@
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
+    <!-- Validata CSS-->
+    <link rel="stylesheet" href="{{ url_for('static', filename='validata.css')}}">
     <title>Validata – {% block title %}{% endblock %}</title>
-
-    <style>
-        body {
-            font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-        }
-
-        .footer {
-            background-color: #f5f5f5;
-            padding: 3em;
-            margin-top: 5em;
-        }
-    </style>
     {% endblock %}
 </head>