ENGCOM-2476: Adjust page-main container height for sticky footer; fixes

#15118 #17006
magento · Jul 26, 2018 · 5cf69d2 · 5cf69d2
2 parents 18aa2d1 + ec77623
commit 5cf69d2
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 25 deletions.
diff --git a/app/design/frontend/Magento/blank/Magento_Theme/web/css/source/_module.less b/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 {

diff --git a/app/design/frontend/Magento/blank/web/css/source/_layout.less b/app/design/frontend/Magento/blank/web/css/source/_layout.less
@@ -95,10 +95,6 @@
     .page-main {
         width: 100%;
 
-        .lib-vendor-prefix-flex-grow(1);
-        .lib-vendor-prefix-flex-shrink(0);
-        .lib-vendor-prefix-flex-basis(auto);
-
         .ie9 & {
             width: auto;
         }

diff --git a/app/design/frontend/Magento/luma/Magento_Theme/web/css/source/_module.less b/app/design/frontend/Magento/luma/Magento_Theme/web/css/source/_module.less
@@ -74,6 +74,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
     //  ---------------------------------------------
@@ -313,14 +323,12 @@
     //
     //  Widgets
     //  ---------------------------------------------
-    //  @codingStandardsIgnoreStart caused by bug in CodeSniffer implementation
     .sidebar {
         .widget.block:not(:last-child),
         .widget:not(:last-child) {
             margin-bottom: @indent__xl;
         }
     }
-    //  @codingStandardsIgnoreEnd
 
     .widget {
         clear: both;
@@ -418,12 +426,6 @@
             }
         }
     }
-    .page-footer,
-    .copyright {
-        bottom: 0;
-        position: absolute;
-        width: 100%;
-    }
 }
 
 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
@@ -616,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;