refactored to avoid setting heights to html and body

blockbase/assets/ponyfill.css

@@ -101,24 +101,25 @@ h1.has-background, h2.has-background, h3.has-background, h4.has-background, h5.h
 
 /**
  * This file pushes the footer to the bottom of the page.
- * The 32px is for the admin bar, if it exsits.
  */
-html {
-	height: calc( 100% - 32px);
+:root {
+	--wpadmin-bar--height: 46px;
 }
 
-body {
-	height: calc( 100% + 32px);
+.wp-site-blocks {
+	min-height: 100vh;
+	display: grid;
+	grid-template-rows: auto 1fr;
 }
 
-body.admin-bar {
-	height: calc( 100%);
+@media (min-width: 600px) {
+	body.admin-bar {
+		--wpadmin-bar--height: 32px;
+	}
 }
 
-.wp-site-blocks {
-	display: grid;
-	height: 100%;
-	grid-template-rows: auto 1fr;
+body.admin-bar .wp-site-blocks {
+	min-height: calc( 100vh - var(--wpadmin-bar--height));
 }
 
 ::selection {

blockbase/sass/base/_footer.scss

@@ -1,22 +1,23 @@
 /**
  * This file pushes the footer to the bottom of the page.
- * The 32px is for the admin bar, if it exsits.
  */
 
-html {
-	height: calc( 100% - 32px );
-}
-
-body {
-	height: calc( 100% + 32px );
-
-	&.admin-bar {
-		height: calc( 100% );
-	}
+:root {
+	--wpadmin-bar--height: 46px;
 }
 
 .wp-site-blocks {
+	min-height: 100vh;
 	display: grid;
-	height: 100%;
 	grid-template-rows: auto 1fr;
 }
+
+body.admin-bar {
+	@include break-small() {
+		--wpadmin-bar--height: 32px;
+	}
+
+	.wp-site-blocks {
+		min-height: calc( 100vh - var(--wpadmin-bar--height) );
+	}
+}