Footer Placement Fix

Footer now stays at the bottom
patrickmfsd · Jul 18, 2018 · 0210e5f · 0210e5f
1 parent a1ea4a5
commit 0210e5f
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 11 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -2,16 +2,24 @@
 <html>
   {% include head.html %}
   <body>	
-    {% include header.html %}
-	<!-- Content -->
-    <div class="row animated fadeIn bodycontent">
-		<div class="col-md-10">
-        	{{ content }}
-		</div> 
-    </div>
-    <div class="col-md-12">
-    	{% include footer.html %}
-    </div>
-    	{% include include_js.html %}   
+	  <div id="wrapper">
+		<div id="header">
+			{% include header.html %}
+		</div>
+		<div id="content">
+			<!-- Content -->
+		    <div class="row animated fadeIn bodycontent">
+				<div class="col-md-10">
+		        	{{ content }}
+				</div> 
+		    </div>
+		</div>
+		<div id="footer">
+			<div class="col-md-12">
+		    	{% include footer.html %}
+		    </div>
+		</div>
+	</div>
+	{% include include_js.html %}   
   </body>
 </html>
diff --git a/_sass/_site.scss b/_sass/_site.scss
@@ -14,6 +14,30 @@ body {
 	margin:0;
 }
 
+html,
+body {
+   margin:0;
+   padding:0;
+   height:100%;
+}
+
+#wrapper {
+   min-height:100%;
+   position:relative;
+}
+
+#content {
+   padding:10px;
+   padding-bottom:60px;   /* Height of the footer */
+}
+
+#footer {
+   position:absolute;
+   bottom:0;
+   width: 100%;
+ }
+
+
 .navbar-toggler {
      outline: none !important;
      border: none !important;