gui: Improve layout of footer on narrow screens (fixes #2663)

gui/default/assets/css/overrides.css

@@ -275,11 +275,32 @@ ul.three-columns li, ul.two-columns li {
 /** Footer nav on small devices **/
 
 @media (max-width: 1199px) {
+    /* Stay at the end of the page, with space reserved for the footer
+    usually taking up two rows. */
+
+    html {
+        position: relative;
+        min-height: 100%;
+    }
+
     body {
-        padding-bottom: 0;
+        padding-bottom: 60px;
     }
 
     .navbar-fixed-bottom {
-        position: static;
+        position: absolute;
     }
 }
+
+@media (max-width: 768px) {
+    /* Layout after the normal contents, as this is when the footer switches
+    to a vertical layout. */
+
+    body {
+        padding-bottom: 0px;
+    }
+
+    .navbar-fixed-bottom {
+        position: relative;
+    }
+}