place footer at bottom only if page is "short"
You don't need javascript for this.
There is a method called "stickyfooter" which delivers a way to get the footer always to the bottom, even if there is not much content.
Here is a simple example:
html, body {
height:100%;
}
#wrapper {
position: relative;
min-height:100%;
}
#main {
padding-bottom: 44px;
}
footer {
height: 44px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
See this fiddle to see how it works.
You can solve your problem only with CSS.
You need an element for your content and an element for the footer below.
<div id="container">
<div id="content">
<div id="main">
Content
</div>
</div>
<div id="footer">
Footer
</div>
</div>
Give #content a min-height of 100% and set a height and reverse margin-top (same as height) for #footer. To protect the last element in #content against a overlap set a margin-bottom.
#content {
min-height: 100%;
}
#footer {
height: 3em;
margin-top: -3em;
}
#main {
padding-bottom: 3em; /** height of #footer */
}
Here is an example:
http://jsfiddle.net/GB4vA/1/
Cameron Adams wrote an article about your problem. http://www.themaninblue.com/writing/perspective/2005/08/29/
In plain javascript:
if (window.innerHeight > document.body.offsetHeight) {
// code to make the footer stick to bottom
}