Archived

This topic is now archived and is closed to further replies.

  • 0

Sticky Footer

Question

Posted · Report post

Hello,

 

How can this code be incorporated to have a real sticky footer, not just changing the the min-height settings, i.e. #site #page, #site #dynamic-content {min-height: 400px;}?

 

Here's the testing URL: http://www.thebluetreecreative.com

 

And here is the code that works for sticky footer:

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
	height: 142px; /* .push must be the same height as .footer */
}

 

Any help would be awesome.

 

Cheers,

Brian

Share this post


Link to post
Share on other sites

1 answer to this question

Posted · Report post

Hi Brian,

 

I'm not a programmer, so your question may be a bit over my skill level.

 

I thought it might be possible to clone the footer section, but that doesn't appear to be one that is cloneable.  I hoped that one of the sections might provide a format for this, but alas the footer columns section only works within the footer, and is not the footer itself.  I looked too at the morefoot section, but that had similar issues with this kind of customization.

 

Unfortunately, this customization doesn't look like something that could be easily done. It really would take the help of a professional developer to avoid the many pitfalls of changing the layout.

 

Your code appears to be only CSS.  This is only part, I think, of the equation.  Somewhere, you'd have to include those elements cited in your CSS, applied to some action causing the footer to be sticky.

 

My suggestions include searching for a plugin and if that fails, go to our Pros page to seek one of our professional developers.

Share this post


Link to post
Share on other sites