putting footer to bottom of page

Highlighted
New Member
53 0 0

Hello all, 

 

I have a footer bar that I am aiming to force to the bottom of the page. On pages with lots of content this is fine, but on pages with very little content it sits half way up the page. I have tried setting the body to 100vh but thats makes pages with very little content larger than the screen size forcing you to scroll to the footer which is unnecessary. 

 

Any help appreciated! Thanks. 

0 Likes
Highlighted
Shopify Partner
45 13 9

Hi,

You can set page content div to a minimum height which can be 70vh .

If helpful then please Like and Accept Solution.
Email: mijan.karim@yahoo.com
Skype: mijan.karim
0 Likes
Highlighted
New Member
53 0 0

Hi,

 

I tried this, 70vh is not tall enough and the footer still sits halfway up the page when set to this height. Thanks.

0 Likes
Highlighted
Shopify Partner
45 13 9

You can try to fixed footer at bottom by using css something like this .

 

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
If helpful then please Like and Accept Solution.
Email: mijan.karim@yahoo.com
Skype: mijan.karim
0 Likes
Highlighted
New Member
53 0 0

Hello, 

 

I have tried this also & unfortunately doesn't work. 

0 Likes
Highlighted
Shopify Partner
45 13 9

Can you give page link which is shorter ?

If helpful then please Like and Accept Solution.
Email: mijan.karim@yahoo.com
Skype: mijan.karim
0 Likes
Highlighted
New Member
53 0 0

Sure, I have added it below.

https://nfjfn2ykkvbal7p3-3748626467.shopifypreview.com

 

Please go to the login page, you will see a page that has short content. Thanks.

0 Likes
Highlighted
Shopify Partner
45 13 9

Which page has little content ?

If helpful then please Like and Accept Solution.
Email: mijan.karim@yahoo.com
Skype: mijan.karim
0 Likes
Highlighted
New Member
53 0 0

The login page, apologies, I thought I had added the page too.

0 Likes
Shopify Partner
45 13 9

This css should work .

 

footer{
position:fixed;
width:100%;
bottom:0;
}

It will fixed footer in bottom.

If helpful then please Like and Accept Solution.
Email: mijan.karim@yahoo.com
Skype: mijan.karim
0 Likes