diff --git a/src/static/css/App.css b/src/static/css/App.css
index 37cc795..f6b651f 100755
--- a/src/static/css/App.css
+++ b/src/static/css/App.css
@@ -193,6 +193,16 @@ tr {
   position: unset !important;
 }
 
+.growBottom {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.growBottom :last-child {
+  flex-grow: 1;
+}
+
 .header h1 {
   display: inline-block;
   transition: .4s;
diff --git a/src/templates/about.html b/src/templates/about.html
index b2a0f2d..8c5e847 100644
--- a/src/templates/about.html
+++ b/src/templates/about.html
@@ -1,6 +1,6 @@
 {% block content %}
 <div class="foreground"></div>
-<div class="relative">
+<div class="relative growBottom">
   <div id="nametag" class="flex" data-aos="fade-up">
     <div>
         <h1 class="textGrad">About</h1>
diff --git a/src/templates/home.html b/src/templates/home.html
index ced9463..494e90d 100755
--- a/src/templates/home.html
+++ b/src/templates/home.html
@@ -19,7 +19,7 @@
 {% endmacro %}
 
 <div class="foreground homeground"></div>
-<div class="relative">
+<div class="relative growBottom">
     <div id="nametag" class="flex" data-aos="fade-up">{{ nameplate() }}</div>
     <!--<INSERT SMALL BANNER HERE FOR PROJECT IMAGECARD CAROUSEL>-->
     <div id="desktopSpacer"></div>
diff --git a/src/templates/projects.html b/src/templates/projects.html
index 3ae919d..6416ad6 100755
--- a/src/templates/projects.html
+++ b/src/templates/projects.html
@@ -1,6 +1,6 @@
 {% block content %}
 <div class="foreground"></div>
-<div class="relative">
+<div class="relative growBottom">
   <div id="nametag" class="flex" data-aos="fade-up">
     <div>
         <h1 class="textGrad">Work</h1>