fix footer

www/data/css/styles.css

@@ -1,13 +1,6 @@
-html, body {
-  height: 100%;
-  margin: 0; }
-
 body {
-  margin: 0;
   background-color: #EEE;
-  color: #CCC;
-  display: flex;
-  flex-direction: column; }
+  color: #CCC; }
 
 #content {
   padding-top: 64px;
@@ -15,7 +8,6 @@ body {
   justify-content: center;
   line-height: 1.4; }
 
-/*############################################################################*/
 .content-responsive {
   margin-left: auto;
   margin-right: auto; }
@@ -60,26 +52,26 @@ body {
   display: block;
   width: 100%; }
 
-.headerdiv {
+#headerdiv {
   background-color: #333;
   display: flex;
   border-bottom: 1px solid #111;
   box-shadow: 0 0 8px #000000;
   position: fixed;
   width: 100%; }
-  .headerdiv .logowrapper {
+  #headerdiv .logowrapper {
     flex: initial;
     margin: 0;
     padding: 0;
     height: 42px; }
-    .headerdiv .logowrapper .logo {
+    #headerdiv .logowrapper .logo {
       height: 30px;
-      margin: 4px 0px 8px 6px;
+      margin: 4px 0 8px 6px;
       flex: initial; }
-  .headerdiv .tabrow {
+  #headerdiv .tabrow {
     display: flex;
     flex: auto; }
-    .headerdiv .tabrow .tab {
+    #headerdiv .tabrow .tab {
       display: flex;
       justify-content: center;
       align-items: center;
@@ -94,48 +86,73 @@ body {
       min-width: 64px;
       text-align: center;
       flex: initial; }
-      .headerdiv .tabrow .tab:hover {
+      #headerdiv .tabrow .tab:hover {
         cursor: pointer;
         background-color: #555; }
-    .headerdiv .tabrow .tab_split {
+    #headerdiv .tabrow .tab_split {
       flex: auto; }
-    .headerdiv .tabrow .tab_github {
+    #headerdiv .tabrow .tab_github {
       background-color: #4078c0;
       border-left: 1px solid #111;
       border-right: 1px solid #111;
       color: black; }
-      .headerdiv .tabrow .tab_github:hover {
+      #headerdiv .tabrow .tab_github:hover {
         background-color: #c9510c;
         color: black; }
 
 @media (max-width: 850px) {
-  .headerdiv {
-    position: static; }
-
-  .logowrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center; }
-
-  .headerdiv {
+  #headerdiv {
+    position: static;
     flex-direction: column; }
-
-  .tabrow {
-    flex-direction: column; }
-
-  .tab {
-    border: 1px solid #000;
-    font-weight: bold;
-    margin: 5px 10px; }
+    #headerdiv .logowrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center; }
+    #headerdiv .tabrow {
+      flex-direction: column; }
+      #headerdiv .tabrow .tab {
+        border: 1px solid #000;
+        font-weight: bold;
+        margin: 5px 10px; }
 
   #content {
-    padding-top: 0px; } }
-#footerdiv {
-  margin-top: auto;
-  padding-bottom: 10px;
-  background-color: transparent;
-  text-align: center; }
+    padding-top: 0; } }
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%; }
 
+#mastercontainer {
+  min-height: 100%;
+  position: relative; }
+
+#content {
+  padding-bottom: 60px;
+  /* Height of the footer */ }
+
+#footerdiv {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 60px;
+  /* Height of the footer */
+  text-align: center;
+  left: 0;
+  right: 0;
+  margin: 0 auto; }
+
+@media (max-width: 767px) {
+  #footerdiv {
+    width: auto; } }
+@media (min-width: 768px) {
+  #footerdiv {
+    width: auto; } }
+@media (min-width: 992px) {
+  #footerdiv {
+    width: 724px; } }
+@media (min-width: 1200px) {
+  #footerdiv {
+    width: 1170px; } }
 #footerdiv hr {
   margin-bottom: 5px;
   display: block;