Keep Footer at Bottom of viewable screen

[PhilMurray]

hi

How can i keep the footer always fixed to the bottom of the device screen in my genesis child theme?

[if you look at http://www.masters.com you can see the footer always remains at the bottom of the viewable screen]  i am sure this can be done for a child theme -- anyone know how?

thanks

Phil

[David Chu]

Hi,
That's a CSS question, not really a Genesis one. But I can give you a head start. Here is the CSS for their footer. The key ingredients that you need to know are "position: fixed", "left", and "bottom", which interact to stick that to the bottom. You can apply similar ideas to the Genesis footer CSS code in style.css. When you use these, you'll obviously need to adjust them to taste.

#footer {
  background-color: #000000;
  border-top: 1px solid #2B2B2B;
  bottom: 0;
  height: 36px;
  left: 0;
  position: fixed;
  width: 100%;
  z-index: 11;
}

I give the site demerits for hitting you with audio when you get there. 🙂 Also, the sticky footer as coded like the above should work fine, but if the visitor has a computer that's not very tall, like a laptop, and the page content is long, the bottom of the content will go below the sticky footer. This is a much more complex CSS situation, and well beyond the scope of a forum post here.

Good luck, Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Simon Abramson]

NOTE: #footer is now .site-footer in Genesis themes using HTML5:
http://my.studiopress.com/docs/genesis-markup-comparison/

[Author]

Posts