feat(footer): remove fixed height by using flexbox for sticky footer

Pelican-Elegant · Jun 29, 2019 · d9d84e1 · d9d84e1
1 parent 137a02a
commit d9d84e1
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/static/css/elegant.css b/static/css/elegant.css
@@ -1,15 +1,21 @@
 /* Base */
-/* #push.height = -#content-sans-footer.margin-bottom = #footer.margin-top + ul.footer-content */
-body,
-html {
+html,
+body {
   height: 100%;
 }
-#content-sans-footer {
-  min-height: 100%;
-  margin-bottom: -60px;
+body {
+  display: flex;
+  flex-direction: column;
 }
-#push {
-  height: 60px;
+div#content {
+  flex: 1 0 auto;
+}
+footer {
+  flex-shrink: 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.2);
+  font: 0.8em Calibri, Tahoma, Arial, Sans-Serif;
+  margin: 15px 0 0 0;
+  padding: 0;
 }
 h1,
 h2,

diff --git a/templates/_includes/footer.html b/templates/_includes/footer.html
@@ -1,5 +1,4 @@
 <footer>
-<div id="footer">
     <ul class="footer-content">
         {% from '_includes/_defaults.html' import SITESUBTITLE with context %}
         {% if SITESUBTITLE %}
@@ -24,7 +23,6 @@
             {% endif %}
         </li>
     </ul>
-</div>
 {% if AMAZON_ONELINK %}
 <div id="amzn-assoc-ad-{{ AMAZON_ONELINK }}"></div>
 <script async src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId={{ AMAZON_ONELINK }}">

diff --git a/templates/base.html b/templates/base.html
@@ -52,7 +52,7 @@
         {% include '_includes/analytics.html' %}
     </head>
     <body>
-        <div id="content-sans-footer">
+        <div id="content">
         <div class="navbar navbar-static-top">
             <div class="navbar-inner">
                 <div class="container-fluid">
@@ -89,7 +89,6 @@
                 <div class="span1"></div>
             </div>
         </div>
-        <div id="push"></div>
     </div>
         {% include '_includes/footer.html' %}
         {% block script %}