STARIKOVS

In this article I will show you a method of how to make sticky Footer with help of CSS. Following this sample your’ll find out a nonstandard enough way of how to stick footer to bottom.

The footer element is positioned immediately after the content element if the content element has height bigger then the window height, otherwise the footer element is positioned at the bottom of the browser’s window.

If you will decide to use this approach, check it in all the browsers your site should be compatible with. Note that min-height of 100% works only in good browsers

HTML:

1
2
3
4
5
6
7

  <div id="content">
    <p>Some text</p>
    <p>Some text</p>
    <p>etc...</p>
  </div>
 
  <div id="footer">Footer</div>?

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

  html, body {
    position: relative;
    height: 100%;
  }
 
  #footer {
    width: 100%;
    height: 100px;
    margin-top: -100px;
    box-sizing: border-box;
    padding: 10px;
    border-top: 3px solid gray;
    background-color: lightyellow;
    text-align: center;
  }
 
  #content {
    position: relative;
    box-sizing: border-box;
    min-height: 100%;
    padding-bottom: 100px;
    border: 1px dotted red;
  }
?

Try this example at http://jsfiddle.net/yGLyN/.