ENGCOM-2878: [Forwardport] Adjust page-main container height for sticky footer; fixes #15118 #17809

Author: Stanislav Idolov

app/design/frontend/Magento/blank/Magento_Theme/web/css/source/_module.less

@@ -52,6 +52,16 @@
         .lib-css(background-color, @page__background-color);
     }
 
+    .page-wrapper {
+        .lib-vendor-prefix-display(flex);
+        .lib-vendor-prefix-flex-direction(column);
+        min-height: 100vh; // Stretch content area for sticky footer
+    }
+
+    .page-main {
+        .lib-vendor-prefix-flex-grow(1);
+    }
+
     //
     //  Header
     //  ---------------------------------------------
@@ -279,17 +289,7 @@
 //  _____________________________________________
 
 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
-
-    html,
-    body {
-        height: 100%; // Stretch screen area for sticky footer
-    }
-
     .page-wrapper {
-        .lib-vendor-prefix-display(flex);
-        .lib-vendor-prefix-flex-direction(column);
-        min-height: 100%; // Stretch content area for sticky footer
-
         > .breadcrumbs,
         > .top-container,
         > .widget {

app/design/frontend/Magento/luma/Magento_Theme/web/css/source/_module.less

@@ -67,6 +67,16 @@
         .lib-css(background-color, @page__background-color);
     }
 
+    .page-wrapper {
+        .lib-vendor-prefix-display(flex);
+        .lib-vendor-prefix-flex-direction(column);
+        min-height: 100vh; // Stretch content area for sticky footer
+    }
+
+    .page-main {
+        .lib-vendor-prefix-flex-grow(1);
+    }
+
     //
     //  Header
     //  ---------------------------------------------
@@ -411,12 +421,6 @@
             }
         }
     }
-    .page-footer,
-    .copyright {
-        bottom: 0;
-        position: absolute;
-        width: 100%;
-    }
 }
 
 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
@@ -614,10 +618,7 @@
     }
 
     .page-wrapper {
-        .lib-vendor-prefix-display(flex);
-        .lib-vendor-prefix-flex-direction(column);
         margin: 0;
-        min-height: 100%; // Stretch content area for sticky footer
         position: relative;
         transition: margin .3s ease-out 0s;