Styling

css/custom.css

@@ -47,13 +47,23 @@ input {
     min-width: 100px;
 }
 
-footer {
+html, body {
-    position: absolute;
+    height: 100%;
-    bottom: 0;
+    margin: 0;
-    width: 100%;
-    height: 10.5rem;            /* Footer height */
 }
-.footer {
+.wrapper {
-    vertical-align: top;
+    min-height: 100%;
-    text-align: left;
+
+    /* Equal to height of footer */
+    /* But also accounting for potential margin-bottom of last child */
+    margin-bottom: -150px;
 }
+footer,
+.push {
+    height: 150px;
+}
+
+/*.footer {*/
+/*    vertical-align: top;*/
+/*    text-align: left;*/
+/*}*/

index.html

@@ -26,6 +26,7 @@
 <!--            </form>-->
 <!--        </div>-->
 <!--    </nav>-->
+        <div class="wrapper">
             <section>
                 <div class="container">
                     <h1>Genderwatch-protocol</h1>
@@ -136,6 +137,9 @@
 
                 </div>
             </section>
+            <div class="push"></div>
+        </div>
+
 
         <footer class="text-center">
             <div class="container footer">