How do you stop a footer from riding up on the Service Portal Login Page

[zag]

I created a footer for our Service Portal. Its rather large so I have the Fixed Footer turned off on the Theme. 

The problem occurs before a user logs into the portal, the footer rides up to be just under the portion of the visible text because the content in the center is for authenticated users only.  See image below.

Because there is no content between the Header and Footer, all the graphics are scrunched at the top.

Turning on the Fixed Footer option fixes it but it looks terrible for the logged in user because it is such a big footer that it takes up a lot of real-estate. Is there anyway to define the footer in the Theme so that is is move to the bottom of the screen regardless of the screen content?

[zag]

no all of the above have pro's and con's.

[Rob Humphries]

You need to add this css to your page, or theme.

It makes the section element a flex-box and then tells the main element to stretch to fill the available space between the header and footer.

section.page {
  display:flex;
  flex-direction:column;
  min-height:100vh; 
}

main.body {
  flex-grow:1;
}

[Community Alums]

Dear Zag,

Add this stylesheet to your theme's CSS include.:

/** Portal Page Section and Footer Fix **/

section.page {
display: flex;
flex-direction: column;
display: -ms-flexbox;
-ms-flex-direction: column;
}

section.page > main.body,
section.page > section.body {
flex-grow: 1;
flex-shrink: 0;
-ms-flex-positive: 1;
}

Regards,

Vishal