MAGETWO-93978: Footer Overlaps Storefront Page Content In Mobile View

Author: danielrenaud

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/blank/web/css/source/_layout.less

@@ -94,10 +94,6 @@
 
     .page-main {
         width: 100%;
-
-        .lib-vendor-prefix-flex-grow(1);
-        .lib-vendor-prefix-flex-shrink(0);
-        .lib-vendor-prefix-flex-basis(auto);
     }
 
     .columns {

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
     //  ---------------------------------------------
@@ -306,7 +316,6 @@
     //
     //  Widgets
     //  ---------------------------------------------
-
     .sidebar {
         .widget.block:not(:last-child),
         .widget:not(:last-child) {
@@ -411,12 +420,6 @@
             }
         }
     }
-    .page-footer,
-    .copyright {
-        bottom: 0;
-        position: absolute;
-        width: 100%;
-    }
 }
 
 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
@@ -614,10 +617,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;