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

jrlans
New Member
3 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
2571 309 641

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

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
jrlans
New Member
3 0 0

Hey @Zworthkey,

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

jrlans
New Member
3 0 0

Bump. Any suggestions would be greatly appreciated.