Skip to content

Commit 33a67bc

Browse files
author
denistrator
committed
Adjust page-main container height for sticky footer; fixes #15118
1 parent 31c3293 commit 33a67bc

File tree

3 files changed

+20
-25
lines changed

3 files changed

+20
-25
lines changed

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,16 @@
5252
.lib-css(background-color, @page__background-color);
5353
}
5454

55+
.page-wrapper {
56+
.lib-vendor-prefix-display(flex);
57+
.lib-vendor-prefix-flex-direction(column);
58+
min-height: 100vh; // Stretch content area for sticky footer
59+
}
60+
61+
.page-main {
62+
.lib-vendor-prefix-flex-grow(1);
63+
}
64+
5565
//
5666
// Header
5767
// ---------------------------------------------
@@ -279,17 +289,7 @@
279289
// _____________________________________________
280290

281291
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
282-
283-
html,
284-
body {
285-
height: 100%; // Stretch screen area for sticky footer
286-
}
287-
288292
.page-wrapper {
289-
.lib-vendor-prefix-display(flex);
290-
.lib-vendor-prefix-flex-direction(column);
291-
min-height: 100%; // Stretch content area for sticky footer
292-
293293
> .breadcrumbs,
294294
> .top-container,
295295
> .widget {

app/design/frontend/Magento/blank/web/css/source/_layout.less

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -95,10 +95,6 @@
9595
.page-main {
9696
width: 100%;
9797

98-
.lib-vendor-prefix-flex-grow(1);
99-
.lib-vendor-prefix-flex-shrink(0);
100-
.lib-vendor-prefix-flex-basis(auto);
101-
10298
.ie9 & {
10399
width: auto;
104100
}

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

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,16 @@
7474
.lib-css(background-color, @page__background-color);
7575
}
7676

77+
.page-wrapper {
78+
.lib-vendor-prefix-display(flex);
79+
.lib-vendor-prefix-flex-direction(column);
80+
min-height: 100vh; // Stretch content area for sticky footer
81+
}
82+
83+
.page-main {
84+
.lib-vendor-prefix-flex-grow(1);
85+
}
86+
7787
//
7888
// Header
7989
// ---------------------------------------------
@@ -313,14 +323,12 @@
313323
//
314324
// Widgets
315325
// ---------------------------------------------
316-
// @codingStandardsIgnoreStart caused by bug in CodeSniffer implementation
317326
.sidebar {
318327
.widget.block:not(:last-child),
319328
.widget:not(:last-child) {
320329
margin-bottom: @indent__xl;
321330
}
322331
}
323-
// @codingStandardsIgnoreEnd
324332

325333
.widget {
326334
clear: both;
@@ -418,12 +426,6 @@
418426
}
419427
}
420428
}
421-
.page-footer,
422-
.copyright {
423-
bottom: 0;
424-
position: absolute;
425-
width: 100%;
426-
}
427429
}
428430

429431
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
@@ -616,10 +618,7 @@
616618
}
617619

618620
.page-wrapper {
619-
.lib-vendor-prefix-display(flex);
620-
.lib-vendor-prefix-flex-direction(column);
621621
margin: 0;
622-
min-height: 100%; // Stretch content area for sticky footer
623622
position: relative;
624623
transition: margin .3s ease-out 0s;
625624

0 commit comments

Comments
 (0)