Page Component no longer takes up the full viewport

[AdamJ]

In the component pf-c-page, previous iterations (pre- v1.0.149 release) set the height property to height: 100vh, which allowed the <Section> elements to stretch the full height of the browser, when content did not fill the space.

From an initial investigation, the commit 4fb055b97 set the property to height: 100%;. As such, <Section> elements no longer reach the bottom of a browser window.

I've included before and after screenshots for clarification.

Before

After

[mcoker]

hey @mindreeper2420, this change assumes that any ancestors of something that needs to be full height would also have height: 100%; assigned. Will that not work for you? This was a solution to a bug reported by OpenShift in #1174

[AdamJ]

@mcoker That isn't how it appears to be working in Integr8ly (or my test environment) - I'm assuming that the <section> element should then be 100% of the page, which would cause it to appear like screenshot 1 vs screenshot 2, correct? The only thing that fixed the <section> being cut short was resetting pf-c-page to 100vh.

From looking at the bug, the change was made to fix a very specific iOS/mobile issue on a single product and not for a desktop browser issue in Core as a whole. Is it possible to reset this back to 100vh for desktop and add a media query for browsers so that it uses 100%? That 'should' satisfy all needs.

[AdamJ]

@mcoker I'm also wondering if an additional helper class might be useful in a case like this, rather than adding a media query - something simple like pf-m-100vh (not a correct usage, but just an idea).

[mcoker]

closed via #1400