Cant get custom or OOB footer to stay at the bottom of portal (sticky)

Corbett Croslin · ‎11-02-2022

I've tried so many different things to get the footer to stay at the bottom but there appears to be a conflict I can't find using the browser inspect tool. I've tried position absolute/relative on the elements html, body, main, footer, and a bunch of classes and ID's. Even when switched with OOB footer and header the footer was not on the bottom. I don't have any css in portal, themes, or css/js include.

Harold Benitez · ‎01-18-2023

Hi @Corbett Croslin,

I'm not sure if you already got this resolved but this is what I use to make the portal sections display properly especially the footer section when you want it to appear at the bottom without making it sticky.

In your portal theme, create a new CSS include and add the following:

/** 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;
}

View solution in original post

ahendawee · ‎07-24-2025

Solved, you should use this style in the theme, it work and fix the all footer cases to be in the bottom

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

main.body {
flex-grow: 1;
}