Sticky Footer is Not Giving Sticky Behavior [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
christianselig.com/contact
For some reason the footer only sticks half way up the page on this one page, but all the others are seemingly okay. I've looked for ages and can't peg the reason.
I've put the relevant HTML and CSS below, and anything more is obviously available.
HTML:
<div class="alt-contact">
<p>Prefer manual contacting? Email me.</p>
</div>
</div> <!-- This div corresponds to the content wrapper div above -->
<div class="footer-wrapper">
<div class="footer">
<p class="copyright">Copyright © 2012 Christian Selig</p>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
CSS:
.footer-wrapper {
background: #f7f7f7; /* Old browsers */
background: -moz-linear-gradient(top, #f7f7f7 0%, #d6d6d6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#d6d6d6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f7f7f7 0%,#d6d6d6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f7f7f7 0%,#d6d6d6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f7f7f7 0%,#d6d6d6 100%); /* IE10+ */
background: linear-gradient(to bottom, #f7f7f7 0%,#d6d6d6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */
border-top: 1px solid #ccc;
bottom: 0;
height: 16px;
overflow: hidden;
padding: 8px 0 5px 0;
position: absolute;
width: 100%;
}
.footer {
color: #808080;
clear: both;
font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;
font-size: 0.7em;
margin: auto;
width: 900px;
}

Answer 1

You should have:
html,
body {
height: 100%;
}
Your html has no height given to it, so it's only as tall as the body pushes it. Note, in IE8 and less you have to use "tricker" solutions like Ryan Fait's Sticky Footer:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
/* the bottom margin is the negative value of the footer's height */
margin: 0 auto -142px;
}
.footer, .push {
/* .push must be the same height as .footer */
height: 142px;
}
/* Sticky Footer by Ryan Fait
http://ryanfait.com/ */
I've used it; it works. It gives you headaches, though, because it essentially takes margin and padding flexibility away from you. Which can be a pain.

Answer 2

Yes, it's because position: absolute; doesn't make sticky footers. If you want a sticky footer, you need to use position: fixed;. this will make the footer stay in the same spot relative to the browser window, as opposed to the next relevant parent object.
Good Luck,
-Brian