Sticky Footer

Site URL: https://www.madleennilsson.com/

Hi tuanphan! 

I wonder if you can help me with getting a sticky footer to all my pages? I would like it to work as explained in the attached picture.

My site has a password — Can I send it to you privately?

Very best,

Madleen Nilsson

If you post the password we can help.

Hi. Can you share link to the guide in screenshot?

Of course. Link to the screenshot:

https://css-tricks.com/couple-takes-sticky-footer/

After looking into it this afternoon, I managed to find a solution that somewhat works. You would need to tweak it a bit for you to make it work with the size of your website.

.Site-inner {
  min-height: calc(100vh - 9px);
}
.footer {
  height: 10px;
}

By using this, it should solve the problem. Check mobile view as well to see if it works fine!

Wow, thank you so much for your answer Sam! So kind of you. It's also the first code that actually has shown results when I've tried to fix this. 

I've managed to make it look good on my 27" monitor. But on my 15" laptop it doesn't really fit. It's like I have to choose which one of them is more important with this code. Is there any way around this?

I now have the following code inserted to my css:

.Site-inner {
  min-height: calc(100vh - 17px);
}
.footer {
  height: 10px;
}

And I'm sorry for the late answer. I've been working on making the site ready for public. And now it is. I thought it must be easier to look at this issue when the site is public.

Thanks again for your answer.

The issue is on this page:  https://www.madleennilsson.com/contact

You min-height value is incorrect. Could be an input error, or the square space compiler changing it.

I also don't see anything with the class "footer".

Is your end goal to have the footer be at the bottom of the content on long pages, but the bottom of the screen on short pages?

The correct way to do this, because the header and footer change heights dynamically is with JS.

This code will do what you want, if you have a business/commerce account.

$(document).ready(function() {
  var siteHeight = $('.Footer').height() + $('.Header').height();
  $('.Site-inner').attr('style', 'min-height:calc(100vh - ' + siteHeight + 'px)');
});

Thank you so much rwp! That is correct. That's exactly the outcome I'm looking for.

Where do I input this code? Should I follow the instructions you have for jQuery or is it something different for Javascript?

I have a Basic Commerce account.

Thanks again for your help. I appreciate it a lot! 

Yes, follow the jQuery instructions.

Put the jQuery script in site wide header injection, and the script above in the footer injection. (don't forget the <script> tags)

Awesome! Damn, thank you so much rwp! It works great! 

Hi! I need help with footer too. I tried the code but it didnt worked