diff --git a/src/scss/_app-main.scss b/src/scss/_app-main.scss
index 886707506..5f794efdb 100644
--- a/src/scss/_app-main.scss
+++ b/src/scss/_app-main.scss
@@ -14,6 +14,46 @@
     }
   }
 
+  .app-content-bottom-area {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: $lte-content-padding-y $lte-content-padding-x;
+    display: flex;
+    align-items: center;
+    background: $lte-app-footer-bg;
+    border-top: $lte-app-footer-border-top;
+
+    > .row {
+      display: contents;
+    }
+  }
+
+  &.app-content-bottom-area-sm {
+    padding-bottom: $lte-app-content-bottom-area-height-sm + 1rem;
+
+    .app-content-bottom-area {
+      height: $lte-app-content-bottom-area-height-sm;
+    }
+  }
+
+  &.app-content-bottom-area-md {
+    padding-bottom: $lte-app-content-bottom-area-height-md + 1rem;
+
+    .app-content-bottom-area {
+      height: $lte-app-content-bottom-area-height-md;
+    }
+  }
+
+  &.app-content-bottom-area-lg {
+    padding-bottom: $lte-app-content-bottom-area-height-lg + 1rem;
+
+    .app-content-bottom-area {
+      height: $lte-app-content-bottom-area-height-lg;
+    }
+  }
+
   .app-content {
     padding: $lte-content-padding-y $lte-content-padding-x;
   }
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 4b36579d6..5cb63b2bf 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -62,6 +62,11 @@ $lte-app-header-height-compact:       ($nav-link-height-compact + ($lte-app-head
 $lte-content-padding-y:           0 !default;
 $lte-content-padding-x:           .5rem !default;
 
+// MAIN CONTENT
+$lte-app-content-bottom-area-height-sm: 3rem !default;
+$lte-app-content-bottom-area-height-md: 4.5rem !default;
+$lte-app-content-bottom-area-height-lg: 6rem !default;
+
 // MAIN FOOTER
 // --------------------------------------------------------
 $lte-app-footer-padding:           1rem !default;