fix footer

2017-12-29 01:14:15 +01:00 · 2017-12-29 01:14:15 +01:00 · fb11bdca19
commit fb11bdca19
parent 3f090d3f4b
7 changed files with 118 additions and 79 deletions
--- a/www/data/css/styles.css
+++ b/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;
--- a/www/data/css/styles_footer.scss
+++ b/www/data/css/styles_footer.scss
@ -1,13 +1,42 @@
@import 'styles_config';

-#footerdiv {
-  margin-top:auto;
-  padding-bottom: 10px;
-
-  background-color: transparent;
-  text-align: center;
+html, body {
+  margin:0;
+  padding:0;
+  height:100%;
 }

+// https://stackoverflow.com/a/19723677/1761622
+
+#mastercontainer {
+  min-height:100%;
+  position:relative;
+}
+#headerdiv {
+  //...
+}
+#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;
--- a/www/data/css/styles_global.scss
+++ b/www/data/css/styles_global.scss
@ -1,15 +1,8 @@
@import 'styles_config';

-html, body{ height:100%; margin:0; }
-
 body {
-  margin: 0;
  background-color: $COL_BACKGROUND;
-
  color: $COL_TEXT_NORMAL;
-
-  display:flex;
-  flex-direction:column;
 }

 #content {
@ -20,8 +13,6 @@ body {
  line-height: 1.4;
 }

-/*############################################################################*/
-
 .content-responsive {
  margin-left: auto;
  margin-right: auto;
--- a/www/data/css/styles_header.scss
+++ b/www/data/css/styles_header.scss
@ -1,6 +1,6 @@
@import 'styles_config';

-.headerdiv {
+#headerdiv {
  background-color: #333;
  display: flex;
  border-bottom: 1px solid #111;
@ -16,7 +16,7 @@

    .logo {
      height: 30px;
-      margin: 4px 0px 8px 6px;
+      margin: 4px 0 8px 6px;
      flex: initial;
    }
  }
@ -71,33 +71,30 @@

@media (max-width: 850px) {

-  .headerdiv {
+  #headerdiv {
    position: static;
-  }
-
-  .logowrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .headerdiv {
    flex-direction: column;
-  }

-  .tabrow {
-    flex-direction: column;
-  }
+    .logowrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }

-  .tab {
-    border: 1px solid #000;
-    font-weight: bold;
+    .tabrow {
+      flex-direction: column;

-    margin: 5px 10px;
+      .tab {
+        border: 1px solid #000;
+        font-weight: bold;
+
+        margin: 5px 10px;
+      }
+    }
  }

  #content {
-    padding-top: 0px;
+    padding-top: 0;
  }
 }

--- a/www/fragments/header.php
+++ b/www/fragments/header.php
@ -1,4 +1,4 @@
-<div class="headerdiv">
+<div id="headerdiv">
 	<div class="logowrapper">
 		<img class="logo" src="/data/images/logo.png" />
 	</div>
--- a/www/pages/blog_list.php
+++ b/www/pages/blog_list.php
@ -16,6 +16,7 @@ $allposts = Blog::listAllOrderedDescending();
 	<link rel="stylesheet" href="/data/css/styles.css"/>
 </head>
 <body>
+<div id="mastercontainer">

 <?php include (__DIR__ . '/../fragments/header.php');  ?>

@ -47,5 +48,7 @@ $allposts = Blog::listAllOrderedDescending();
 </div>

 <?php include (__DIR__ . '/../fragments/footer.php');  ?>
+
+</div>
 </body>
 </html>
--- a/www/pages/main.php
+++ b/www/pages/main.php
@ -9,6 +9,7 @@
 	<link rel="stylesheet" href="/data/css/styles.css"/>
 </head>
 <body>
+<div id="mastercontainer">

 	<?php include (__DIR__ . '/../fragments/header.php');  ?>

@ -20,5 +21,6 @@

 	<?php include (__DIR__ . '/../fragments/footer.php');  ?>

+</div>
 </body>
 </html>