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
}

Tags:

Html

Css

Jquery