Update to everyone:
I was never satisfied with the "fixed" footer solution. The fixed footer always sits at the bottom of the page.... even if the content goes beyond the footer. It was easy to implement, but it was not really the result that I wanted.
To be clear, a "true" sticky footer will exhibit this behavior:
1. If there is not enough content to fill up the screen, the footer will rest at the bottom of the screen.
2. If there is enough content to fill up the screen and the screen requires scrolling, the footer will move with the content, always resting below it.
If you would like this behavior, here are some things you can implement.
Either create, or edit an existing, CSS web file.
html,
body {
height: 100%; /* Set to 100% of the container */
}
body > footer {
top: 100vh; /* pushes the footer outside the visible area */
position: sticky; /* pulls it back up and sticks it to the bottom edge */
}
The above CSS will handle the bulk of the work without requiring you to edit anything out of the box (e.g. the footer web template).
Now, you may also want to do something else. The theme.css file that is included with the Power Apps Portals is using a CSS calc() to set the height of the .wrapper-body class. This will cause some slight interference with the sticky footer.
If you see this, then you can apply this extra line to the CSS file that I mentioned above.
.wrapper-body {
min-height: 100px; /* need to set a value to override the theme.css's calc value */
}
That will basically just override the theme.css behavior for the min-height of the div. You can set it to anything, I just picked 100px.
So, there you have it. Here's what my file looks like:
/*
**********************************************************************************************
reset box-sizing,allowing for inheritence. (not required for sticky footer, but I do this regardless)
**********************************************************************************************
*/
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/*
**********************************************************************************************
sticky footer
**********************************************************************************************
*/
html,
body {
height: 100%; /* Set to 100% of the container */
}
body > footer {
top: 100vh; /* pushes the footer outside the visible area */
position: sticky; /* pulls it back up and sticks it to the bottom edge */
}
.wrapper-body {
min-height: 100px; /* need to set a value to override the theme.css's calc value */
}
