Footer - Floating Menu to stay on the edge of any screen size

[nazostro]

Hello!

I am building an app that contains a footer with pagination, “per page” view dropdown, etc… and I a wanting to achieve the effect of it staying at the bottom of my screen at all times (regardless of the page size in height)

As you can see in the screenshot above, it is right on the bottom of my screen.

In the second screenshot, I added content in a separate group that is below the footer because I was testing looks when content goes that far. When I scroll, the footer goes up

Hopefully I explained this well enough - sorry if I didn’t, still learning and new to web dev terms!

Addition: When I anchor is to Right & Bottom, it now is displaying in the middle of the screen

[cmarchan]

[nazostro]

Thank you for all the help!

What this still be possible with a Left Floating Menu? (The footer won’t be able touch the left side of the page)

[cmarchan]

For both to stick to where you want them they must float relatively to both and touch the edges of the screen (the footer horizontally and the left menu vertically)

Yes … they both can coexist doing this

[nazostro]

Tried to do it, but my menu goes to the middle of the screen the second I make the scrollable area further below the footer

Zero idea why it does this. When the content area doesn’t go further than the footer, it’s normal, but the second is goes further down the page (how I need it to), the footer go into the middle

[cmarchan]

Check the horizontal and vertical floating settings of the floating group elements. Play with them until you make things work. Hint: float relative to both, left and above

[nazostro]

Awesome! Managed to figure it out! Thanks so much for your help @cmarchan