Jump to content


Photo
- - - - -

How to fix the footer to the bottom of the page

footer

Best Answer Danny , 03 January 2014 - 12:00 PM

If you want a sticky footer, in my opinion the best way to achieve this is to use a hook and add your sticky footer code there. You will likely want to use a hook location that is outside of the #site div.

 

You can find more information on hooks here - http://docs.pageline.../advanced/hooks

Go to the full post


  • Please log in to reply
10 replies to this topic

#1 andylemay

andylemay

    Advanced Member

  • Members

  • 69 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 04 December 2013 - 06:16 AM

Hi DMS team,

 

A couple of tweaks I'm trying to do!

 

- I'm trying to fix the footer to the bottom of the page.

- remove white space line at the bottom of the page.

 

I've tried using the position: tag but this breaks the full width style

 

Any ideas on the CSS to do this?

 

Many thanks

 

Andy



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 04 December 2013 - 08:50 AM

Hi there, for the footer try
 
#footer {
    bottom: 0;
    position: fixed;
    width: 100%;
}

 

Can we have a link to the site to see where the white line is coming from.



#3 andylemay

andylemay

    Advanced Member

  • Members

  • 69 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 04 December 2013 - 09:00 AM

Hi James,

 

Thank you for that.  That fixes it but allows you to overwrite page contents with the the footer.

 

Site link is www.eshot.co.za/ewizz

 

I'm trying to create a similar effect to that used here http://www.teslamotors.com/

 

Thank you

 

Andy



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 16982 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 04 December 2013 - 12:58 PM

If you're referring to the white space below your footer, this is actually caused by the smiley face Wordpress stats icon. Add the following and this will remove the gap.

 

#wpstats {
display: none;
}
 


#5 andylemay

andylemay

    Advanced Member

  • Members

  • 69 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 04 December 2013 - 01:02 PM

Hi Danny,

 

Thank you for that.

 

Did you see what happens when you shrink the window from the bottom with your code.  The footer overwrites lays the page info.  check the tesla site and you'll see the footer stops at the bottom of the page info.

 

Any idea how to do that?

 

thank you

 

Andy

 



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 16982 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 04 December 2013 - 01:16 PM

As far as I can tell this is related to your custom CSS, we do not provide support for user created CSS. We do not provide extensive CSS support, I would recommend you sign up to a CSS specific forum for assistance.

 

What appears to be happening is that your background footer image has a height 222px and when you go responsive, the footers height expands beyond 222px so the image is repeated, you will probably want to either:

 

1. Increase your footer images height

2. Just use CSS to create a gradient background some like this: (remove your image first ofc)

 

#footer {
#gradient .vertical(#333, #555);
}


#7 andylemay

andylemay

    Advanced Member

  • Members

  • 69 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 05 December 2013 - 06:50 AM

Hi Danny,

 

Thank you for the advice.  I'll do some more investigation. :-)

 

Andy



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 16982 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 05 December 2013 - 12:57 PM

No problem, let us know how you get on.



#9 Cei

Cei

    Member

  • Members
  • PipPip
  • 14 posts
  • Country: Country Flag

Posted 03 January 2014 - 10:12 AM

Hi Danny!

I've been trying to fix my footer all day but there's no way I can fix it the way I want it. I've tried several code but none is working. I would like something like what andylemay wants. I let you see my footer here: www.ahotelroomstory.com . You'll see it's stuck to the bottom but overrides content when pages are long. I want it stuck to the bottom but after the content.

I've tried this code too but it won't work neither:

    html, body {height: 100%;}
    
    #site {min-height: 100%;}
    
    #page {overflow:auto;
        padding-bottom: 275px;} /* must be same height as the footer */
    
    #footer {position: relative;
        margin-top: -275px; /* negative value of footer height */
        height: 275px;
        clear:both;}
    
    /*Opera Fix*/
    body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
    }

 
 
Many thanks

Edited by Cei, 03 January 2014 - 10:12 AM.


#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 16982 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 03 January 2014 - 12:00 PM   Best Answer

If you want a sticky footer, in my opinion the best way to achieve this is to use a hook and add your sticky footer code there. You will likely want to use a hook location that is outside of the #site div.

 

You can find more information on hooks here - http://docs.pageline.../advanced/hooks



#11 Cei

Cei

    Member

  • Members
  • PipPip
  • 14 posts
  • Country: Country Flag

Posted 07 January 2014 - 09:10 AM

Thanks! I'll try to figure out the way!







Also tagged with one or more of these keywords: footer