CODEWITHSUNDEEP
htmlcsssticky-footer
A T I X
A T I X

Reputation: 23

Always display footer at the bottom of the page

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.

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!

Upvotes: 2

Views: 1110

Answers (3)

Leigh B
Leigh B

Reputation: 96

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.

Upvotes: 0

Richard Cotrina
Richard Cotrina

Reputation: 2565

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

Upvotes: 2

Dzhambazov
Dzhambazov

Reputation: 490

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.

Upvotes: 0

Related Questions