How do i keep the footer at the bottom of the page without overlapping?

jrlans
New Member
4 0 0

I'm trying to position my footer as described in the article below:

https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/

Essentially I want the footer to always be at the bottom of the content, unless the content doesn't go the bottom of the page. In that case the footer goes to the bottom of the page, leaving blank space between it and the content.

The trouble is almost every single solution I can find requires the footer to be a specified height. The few that claim will work for dynamic heights don't work., just not sure if that's due to Shopify or myself.

 

I've set the footer's style to position:absolute, bottom:0 and left:0. This ensures its always on the bottom of the page/content.

Problem is If the footer is against the bottom of the content, the footer overlaps it.

Usually the solution is to set a padding-bottom to the main content thats equal to the height of the footer.

My footer's height isn't set, so I try to make a query and set the padding with javascript but any of the methods I've tried always return 0.

offsetHeight, clientHeight, getBoundingClientRect

So I either need a method of getting the height of an element, or an entirely new method of positioning the footer.

Any and all help would be appreciated.

 

Replies 3 (3)

Zworthkey
Shopify Partner
5581 642 1565

Hii, @jrlans 
Kindly share your store URL so,
I can solve it perfectly.
Thank You.

jrlans
New Member
4 0 0

Hey @Zworthkey,

I sent you a message with the URL yesterday. Let me know what you think.

jrlans
New Member
4 0 0

Bump. Any suggestions would be greatly appreciated.