5

I am new to coding and am making my first site on WP. I have been bludgeoning WP into submission using the HTML 5 Blank template. I am having trouble getting my footer to stay at the bottom of the page rather than floating in the middle at times. I understand how to do this on my end, however when I do it in WordPress weird things happen.

When I make my html height:100% in css or when I make my body position:absolute; all my content moves down the page by about the length of a page. I have been trying to band-aid it for each individual page but it creates more and more problems. Anyone got ideas?

the site (it's under a random directory so that I can build it while it's not completely live).

2 Answers 2

8

You HAVE TO SET height on html and body and then on footer set position absolute. Use below css

html, body {padding:0; margin:0; height:100%;}
footer{position: absolute; bottom: 0; left: 0; right: 0;}
10
  • I tried this and it gets the footer so where I want it but something weird has happened between my wordpress theme and my stuff I've created within it. I built it locally and everything looked perfect the way I want it. Now in wordpress when I apply this weird gaps appear in the page, so I have to adjust things up with -margins. There must be something displaying that I am not getting with WP. Commented Oct 3, 2015 at 15:22
  • OK try this .container { height: auto !important; height: 100%;} footer { background: #333333; width: 100%; height: 60px; bottom: 0;}
    – Lemon Kazi
    Commented Oct 3, 2015 at 15:33
  • In this page joebiz.net/blog/category/blog footer inside class="container" but other pages footer outside class="container" like joebiz.net/blog at first solve that problem.
    – Lemon Kazi
    Commented Oct 3, 2015 at 15:39
  • That only fixed the pages with his resume on it. The rest of the pages it floats to the middle of the page or completely to the top. Commented Oct 3, 2015 at 15:39
  • 2
    Okay so deleting that made all the other pages not work. So I kept it and used a body class for the footer on the resume pages and used position:static; That fixed it. Thank you SO MUCH for your time on this. Much appreciated. Commented Oct 3, 2015 at 16:32
-2

Use overflow:hidden; for footer upper div.

1
  • Which upper div are you referring to? Commented Oct 3, 2015 at 15:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.