Sticky Footer

Features

1. Sticks to the bottom.

1. No JS.

1. is pushed below current view if content is longer.

HTML

html

Height:100%.

body

Height:100%.

Main-Wrapper height. 100% margin-bottom: [height of footer] | Padding-bottom.

Footer-Wrapper height. [height of footer].

html, body{height. 100%;}.

#body-wrapper {overflow: hidden; height: 100% !important; margin: 0 auto -36px;}

#footer-wrapper{clear. Both; height: 30px;}.

________________.

The basic premise is that the main body page is stretched to a 100% of the page. With a min-height of 100% too.

The footer is then given the following rules

#footer {.

clear. Both;.

position. Relative;.

z-index. 10;.

height. 3em;.

margin-top: -3em;

}.