How can I get my footer to appear at the bottom of the screen or at the end of content?

Design help General
1

How can I get my footer to appear at the bottom of the screen or at the end of content?

I don’t want the footer to follow the screen as I scroll. I want it to be at the bottom of all content, or if there is not enough content, I just want it to appear at the bottom of the screen instead of directly after the content in the middle of the screen.

I have tried doing absolute bottom, but it only puts it at the bottom of the first screen. If I have a lot of content, it is in the middle of all of it. It only works if there is less than one page of content.

I currently have static, and it just places the footer at the end of all content, so it will be in the middle of the page if there is not enough content.

My original solution was to make two footers: one for low content pages, and one for high content pages. However, due to some pages having low content on desktop, and high on mobile, I would need more than two different footers.

High content page: Home Page
Low content page: Garden Lights Page
Check for mobile compatibility: Security Lights Page

Here is my site Read-Only:
https://preview.webflow.com/preview/szl?utm_medium=preview_link&utm_source=designer&utm_content=szl&preview=b816c883258e850d5a2f2324d991308a&pageId=6139a226de2cde859c79d684&workflow=preview

(how to share your site Read-Only link)

2

That’s pretty specific. Normally I’d just ensure the body has enough content or apply a min-height on that primary content section.

If you really want to support low-content pages with the footer “snapped to” the bottom edge, you could try something like this;

image
image1920×919 114 KB

Then your expanding section would need to be set to grow-if-possible.

Note you’d need to remove your absolute footer positioning on mobile portrait, and also note I haven’t thought through this in detail but the dvh unit is likely the one you want for mobile devices, since the height of the screen can vary dynamically as the toolbar expands and contracts.

You may encounter other layout issues later as your entire body is now using flex layout, but… for a simpler site design it might achieve what you’re looking for.

image
image1920×919 114 KB

3

I tried the suggested fix, but the footer still wasn’t able to get to the bottom. However, I will take your advice on just adding more content. I think at this point, it’s the simplest solution.

Thank you for your help!

4

You could also use this approach https://www.youtube.com/watch?v=NSnx-2Ztyfo @JS_LED