(Re-)add sticky footer using display:table/table-footer-group

48f24114 · Zenon Mousmoulas · 5a05b68b · 48f24114 · 48f24114 · 48f24114
Commit 48f24114 authored Nov 18, 2015 by Zenon Mousmoulas
Showing with 26 additions and 8 deletions

djnro/templates/base.html djnro/templates/base.html +3 -3

djnro/templates/partial/footer.html djnro/templates/partial/footer.html +2 -2

static/css/style.css static/css/style.css +21 -3

No files found.
--- a/djnro/templates/base.html
+++ b/djnro/templates/base.html
@@ -17,7 +17,6 @@
 {% block extrahead %}{% endblock %}
 </head>
 <body class="{% block bodyclass %}{% endblock%}">
-    <div id="wrap">
        {% block header %}
        <div class="push-top"></div>
        <nav class="navbar navbar-default navbar-fixed-top">
@@ -78,14 +77,15 @@
        </nav>
        {% endblock %}

+	<div class="stickyfooter-container">
        {% block content %}
            <div class="container">
                {% block subcontent %}
                {% endblock %}
            </div>
        {% endblock %}
-    </div>
-    {% include "partial/footer.html" %}
+	{% include "partial/footer.html" %}
+	</div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="{% static 'js/script.js' %}"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

--- a/djnro/templates/partial/footer.html
+++ b/djnro/templates/partial/footer.html
 {% load i18n %}
-<footer {% if user.is_authenticated %}class="auth"{% endif %}>
-    <div class="">
+<footer class="stickyfooter">
+    <div>
        <div class="container">
            {% if user.is_authenticated %}
                {% trans "If you have any questions or need help, contact" %} {{ BRANDING.helpdesk.name }} (<a href="{{ BRANDING.helpdesk.uri}}">{{BRANDING.helpdesk.uri}}</a>) - {{BRANDING.helpdesk.phone}}</br>

--- a/static/css/style.css
+++ b/static/css/style.css
@@ -6,20 +6,38 @@ a.navbar-brand img {
 	height: 100%;
 }

+/* sticky footer begin */
 html, body {
 	height: 100%;
 }

+body {
+	margin: 0;
+	padding: 0;
+	overflow-y: scroll;
+}
+
+.stickyfooter-container {
+	display: table;
+	height: 100%;
+	width: 100%;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+footer.stickyfooter {
+	display: table-footer-group;
+	height: 1px;
+}
+/* sticky footer end */
+
 footer {
 	text-align: center;
-	background: #eee;
 }

 footer > div {
 	padding: 25px;
 	background: #eee;
-	left: 0;
-	right: 0;
 }

 .pac-container {