Footer sticks to the bottom

KingFelix · Mar 18, 2019 · 8ffad8e · 8ffad8e
1 parent 29662d7
commit 8ffad8e
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1 +1 @@
-<footer><span>@2015 - Emerald</span></footer>
+<footer class="footer"><span>@2015 - Emerald</span></footer>
diff --git a/_posts/2019-03-18-small-text.md b/_posts/2019-03-18-small-text.md
@@ -0,0 +1,4 @@
+---
+title: Small text
+---
+This is an example of a blog post with small amount of text.
diff --git a/_sass/layout.scss b/_sass/layout.scss
@@ -1,5 +1,10 @@
 /* -- General Layout -- */
 
+/* Required for footer to stick to the bottom */
+html, body {
+	height: 100%;
+}
+
 /* Navigation */
 
 #nav, #nav-left { 
@@ -253,3 +258,19 @@ footer {
   text-align: center;
   padding: 0.6667em 0;
 }
+
+#wrap {
+	min-height:100%; 
+	position:relative;
+	padding-bottom: 105px;
+}
+
+.footer {
+	padding: 25px 0;
+	background-color: $main-color;
+	color: $background-color;
+	text-align: center;
+	position: absolute;
+  width: 100%;
+  bottom: 0;
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<footer><span>@2015 - Emerald</span></footer>
		<footer class="footer"><span>@2015 - Emerald</span></footer>