2

I want to display my footer at the bottom of the page, relative to the content area. So it should adapt if my browser is smaller or larger, up until where the content area stops.

I tried to follow this link but I can't seem to get it to work on my website.

  • I added the PUSH div at the bottom of my content area
  • I set the correct heights and adjustments in the css

My footer is still displayed half way on my screen and also messes up the titles. The guys that sold me the Wordpress theme are reluctant to help me ...

If anyone could guide me in the right direction that would be a great help!

A T I X
  • 23
  • 4
  • possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) – Sleek Geek Feb 09 '15 at 20:26
  • @SleekGeek, thanks for the post. I hadn't seen it. In my case I don't think the theme currently fulfills the third option. I have a section `footer` and then a `div=sub-footer`. – A T I X Feb 09 '15 at 20:37

3 Answers3

2

I think this could do what you want:

body {
  padding-bottom: 50px;
  /* Set a padding-botton equivalent
     to the height of your footer
     this is for preventing the
     footer to be covered because
     of its z-index
  */
}
footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: -999;
}

Hope it works ;)

Richard Cotrina
  • 2,525
  • 1
  • 23
  • 23
0

Add the following code to your css:

footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999;
}

The footer will be always on the bottom.

Dzhambazov
  • 490
  • 2
  • 11
  • thank you for the reply. It worked great, just one problem though. Your footer is always shown at the bottom, even if your main content isn't displayed completely. I'd like to have it so it stays at the bottom of the page, but won't move up when the screen is too small (if you know what I mean?) – A T I X Feb 09 '15 at 20:41
  • I would also give a +1, but you need 15 rep. – A T I X Feb 09 '15 at 20:42
  • I got it, it needed a minus in the z-index ;) – A T I X Feb 09 '15 at 20:53
  • Ah, I though you need something else, sorry my bad :) – Dzhambazov Feb 09 '15 at 20:55
  • No problem, it can always help someone else and I would give it a bump if I had enough rep! – A T I X Feb 09 '15 at 20:56
0

Ok so the issue here is this, you can stick the item to the bottom as @Dzhambazov suggested either with position:absolute or position: fixed it is going to stay in place at the bottom even if that is halfway up your content.

So you can go with other alternates like: How do you get the footer to stay at the bottom of a Web page?

Mentioned in the comments, but this is not going to be as easy with a prebuilt theme as you will be fighting with the theme dev's structure.

What you could do as a fix to make it more bearable is to increase the minimum height of the content so that it "fakes" the footer further down, this has its draw backs and could mean that your footer is off the bottom of the view port, but if it is irritating you to that level. you could try. 

#content { 
min-height: 200px;
/* forces the content block to take up space */
}

hope that helps other wise stick the footer to the bottom as mentiones and have it always display, but note that may trash mobile so you will want to remove the positioning via a media query for phones etc.

Community
  • 1
  • 1
Leigh B
  • 86
  • 4