Streaming live at 10am (PST)

Can't get a div to stick to the bottom of the screen on mobile

Hi all!

I’m trying to get a div to always sit on the bottom of the screen on mobile - eg. emulating a fixed navbar as you would get in a native application.

I have a div set to position absolute - bottom

It looks fine on load:

but when you scroll down (in chrome on android) it moves everything up and leaves an empty strip at the bottom of the page:

Any thoughts on how to fix this would be very appreciated!


Here is my site Read-Only: Webflow - Vatic

[1]: Webflow - Vatic [2]: https://university.webflow.com/article/sharing-your-sites-read-only-link

You said that you have the div set to “position absolute - bottom” but it looks like it is actually set to “fixed”. Try changing to “absolute”.

Here’s what you currently have.

Thanks for the reply - it was fixed at the full desktop breakpoint but absolute in mobile. I’ve made it absolute in both but the issue is only on mobile.

It is hard to test when everything looks ok so I may not be able to give a specific fix. There are many different ways to approach a project and I can only say what approach I would take.

I would say as a general rule don’t apply any styles or classes to the body section. Keep the body section as clean as possible and add the “Footer” directly under the body. I would also usually have the nav directly under the body too.

If you do put the nav and footer inside another div be careful how many styles you apply to the div so it doesn’t get out of control.

If you need styles applied across lots of sections create a div block and put all the sections that need to pick up the same styles in that div instead of adding styles to the body. I think there is a better chance your footer will behave correctly when it is not wrapped inside other elements that have styles attached to them.

Here is a screenshot of an example structure that I would usually go with. Obviously this would not be a quick fix and some rework may be required but you should end up with a cleaner project which is less prone to being incorrectly displayed by the multitude of browsers and devices that exist. Some browsers are better than others at interpreting code that doesn’t exactly conform to best practices which can lead to websites working on one device but not on another.

Thanks! This is really helpful advice :slight_smile: I will implement this and see if it helps. Thanks for taking the time to go through all that!

1 Like