diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
index 257a1910..0e5c519d 100644
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -103,3 +103,8 @@
   margin-bottom: 1rem;
   width: 100%;
 }
+
+.map-container-full-height {
+    /* 100vh - navbar height - footer height */
+    height: calc(100vh - 165px - 120px);
+}
diff --git a/app/views/map/index.html.erb b/app/views/map/index.html.erb
index 011bf06a..53457526 100644
--- a/app/views/map/index.html.erb
+++ b/app/views/map/index.html.erb
@@ -72,7 +72,7 @@
         data-distance="<%= @distance %>"
         data-points_number="<%= @points_number %>"
         data-timezone="<%= Rails.configuration.time_zone %>">
-        <div data-maps-target="container" class="h-[25rem] rounded-lg w-full min-h-screen z-0">
+        <div data-maps-target="container" class="map-container-full-height rounded-lg w-full z-0">
           <div id="fog" class="fog"></div>
         </div>
       </div>