Jump to content

Sticky Footer

Recommended Posts

  • Replies 12
  • Views 3.1k
  • Created
  • Last Reply
  • 2 weeks later...

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!

Link to comment

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.

Link to comment

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?

image.png.e69cc7151ee164fab7548e37455f14ed.png

Link to comment

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)');
});

 

Link to comment

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! 

Link to comment
  • 2 months later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.