» » WordPress: Keeping Footer At The Bottom Using CSS

WordPress: Keeping Footer At The Bottom Using CSS

posted in: WordPress | 1

If you don’t have a sidebar and your page content is minimal, you may find that your footer raises up from the bottom of your screen like a window shade.  The code below will make sure your footer stays to the bottom of your pages and has been tested with the Kandence Virtue Theme only.  If you want to use this code with other themes, you might have to change the id and class names.  They can be found in your footer.php.

Add the following code to your CSS (ex: style.css)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* Sticky Footer - By cyberhawkdesigns.com */
html, body {
margin:0;
height:100%;
}

#wrapper {
position: relative;
min-height:100%;
}

#containerfooter {
position: relative;
margin-bottom: -10px;
bottom: 0;
}

.contentclass {
min-height: 341px; /* adjust to fit */
}

WordPress Rocks! If you can dream it, I can create it!
Like this article? Please click below to share it. Thanks!

One Response

  1. sayeed
    | Reply

    I jut added this code to my site, which is running the Kadence Virtue Theme and my footer is still floating. Can you help me figure out what I did wrong?

Leave a Reply

Your email address will not be published. Required fields are marked *