Javascript to get min-height so that footer is allways at the bottom
authorJean-Michel Nirgal Vourgère <jmv@nirgal.com>
Sun, 1 Aug 2010 21:47:56 +0000 (21:47 +0000)
committerJean-Michel Nirgal Vourgère <jmv@nirgal.com>
Sun, 1 Aug 2010 21:47:56 +0000 (21:47 +0000)
html_templates/base.html
www/global.css

index 166096acb7574307c4de8d568eeb5624622fe5b2..d89c54e78ea909e960c9083f6c0ba6c970d84b32 100644 (file)
@@ -4,6 +4,20 @@
 <title>{% block title %}AIS{% endblock %}</title>
 {% block style_extra %}
 {% endblock %}
+
+<script language=javascript>
+function set_min_heigth() {
+    header = document.getElementById('header');
+    main = document.getElementById('main');
+    footer = document.getElementById('footer');
+    min_heigth = document.body.clientHeight - header.clientHeight - footer.clientHeight - 2;
+    if (min_heigth > 0) {
+        main.style.minHeight = min_heigth+'px';
+    }
+}
+</script>
+
+<body onload="set_min_heigth()">
 <div id=header>
     <span id=bannertitle>AIS ship monitoring</span>
     <span id=bannermenu>Welcome <a href="/user/{{user.login}}/">{{ user.name }}</a> ☮ <a href="/user/{{user.login}}/change_password">change password</a></span>
         <a href='/source/'{% block tab_active_source %}{% endblock %} title="Real time statistics">sources</a>
     </div>
 </div>
-<div id=body>
+<div id=main>
 {% block breadcrumbs %}
 You are here: <a href='/'>home</a>
 {% endblock %}
-<br>
-
+<div style="padding:1ex;">
 {% block content %}{% endblock %}
 </div>
+</div>
 
-<br>
-<br>
 <div id=footer>
 <base target='_blank'>
 <a href="/svn">This</a> is <a href="http://www.gnu.org/licenses/gpl.html">GPL Software</a>
@@ -35,3 +47,4 @@ You are here: <a href='/'>home</a>
 ☮ <a href="http://ipv6.com/articles/general/ipv6-the-next-generation-internet.htm">IPv6 ready</a>
 <base target=''>
 </div>
+</body>
index 1c1099bc83e75d887c2f8ddaff37ccb0eebb7a1f..17a89ff2f3140c8c85c005343dffca33439a14d7 100644 (file)
@@ -40,8 +40,9 @@ body {
     background: white;
 }
 
-#body {
-    margin: 1ex;
+#main {
+    /*margin: 1ex;*/
+    /*min-height: 100%;*/
 }
 #footer {
     text-align: center;