stick the footer to the bottom of the page at all times

7826c51e · Job van der Voort · c0fb4929 · 7826c51e · 7826c51e · 7826c51e
Commit 7826c51e authored 10 years ago by Job van der Voort
--- a/source/_includes/footer.html
+++ b/source/_includes/footer.html
-<div id="footer">
+<div id="footer" class="footer">
  <div class="container">
    <div class="row">
      <div class="col-sm-3 col-md-3">

--- a/source/_layouts/default.html
+++ b/source/_layouts/default.html
@@ -40,43 +40,45 @@
  
  </head>  
  <body>
+    <div class="wrapper">
  
-    <div class="navbar navbar-fixed-top navbar-default" role="navigation">
-      <div class="container">
-        <div class="navbar-header">
-            {% if page.url == '/index.html' %}
-              <a class="navbar-brand animated"><img src="/images/wordmark_inverted_small.png" class="nav-logo"></a>
-            {% else %}
-              <a class="navbar-brand animated" href="/"><img src="/images/wordmark_inverted_small.png" class="nav-logo"></a>
-            {% endif %}
-          </div>
+      <div class="navbar navbar-fixed-top navbar-default" role="navigation">
+        <div class="container">
+          <div class="navbar-header">
+              {% if page.url == '/index.html' %}
+                <a class="navbar-brand animated"><img src="/images/wordmark_inverted_small.png" class="nav-logo"></a>
+              {% else %}
+                <a class="navbar-brand animated" href="/"><img src="/images/wordmark_inverted_small.png" class="nav-logo"></a>
+              {% endif %}
+            </div>
  
-          <div class="collapse navbar-collapse">
-            <ul class="nav pull-right animated navbar-nav">
-              <li><a href="/products">Products</a></li>
-              <li><a href="/services">Services</a></li>
-              <li><a href="/company">Company</a></li>
-              <li><a href="/community">Community</a></li>
-              <li><a href="/blog">Blog</a></li>
-              <li><a href="https://gitlab.com/users/sign_in">Sign in</a></li>
-            </ul>
+            <div class="collapse navbar-collapse">
+              <ul class="nav pull-right animated navbar-nav">
+                <li><a href="/products">Products</a></li>
+                <li><a href="/services">Services</a></li>
+                <li><a href="/company">Company</a></li>
+                <li><a href="/community">Community</a></li>
+                <li><a href="/blog">Blog</a></li>
+                <li><a href="https://gitlab.com/users/sign_in">Sign in</a></li>
+              </ul>
+            </div>
          </div>
        </div>
-      </div>
  
-    {% unless page.suppress_header %}
-    <div id="header">
-      <div class="container">  
-        <div class="row">
-          <div class="col-sm-12 col-md-12">
-            <h1>{{ page.title }}</h1>
+      {% unless page.suppress_header %}
+      <div id="header">
+        <div class="container">  
+          <div class="row">
+            <div class="col-sm-12 col-md-12">
+              <h1>{{ page.title }}</h1>
+            </div>
          </div>
        </div>
      </div>
-    </div>
-    {% endunless %}
+      {% endunless %}
  
-    {{ content }}
+      {{ content }}
+      </div> <!-- wrapper -->
  
    {% include footer.html %}
  

--- a/source/stylesheets/base.css
+++ b/source/stylesheets/base.css
@@ -282,6 +282,7 @@ hr.thick {
  background: #548;
  color: white;
  font-weight: 600;
+  height: 1000px;
 }
  
 .row.videos > div > h1 {
@@ -600,6 +601,25 @@ article {
  font-weight: 300;
 }
  
+/* Sticky Footer */
+
+* {
+  margin: 0;
+}
+html, body {
+  height: 100%;
+}
+.wrapper {
+  min-height: 100%;
+  height: auto !important;
+  height: 100%;
+  margin: 0 auto -200px; /* Neg margin is size of footer */
+}
+.footer, .push {
+  height: 200px;
+}
+
+
 /* Copywrite
 -------------------------------------------------- */
 #copywrite p {