Footer below content, but not floating mid-air if not enough content

Question

I got this code:

DEMO: http://jsfiddle.net/z21nz89d/2/

HTML:

Answer 1

You can use this responsive css code and it is working in all browser's and it can changed according to browser size when browser can resized.

Live Working Demo

HTML Code:

    

        Header is here
    


    

        Content is here
    


    

        Footer is here
    

CSS Code:

  html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    background:#ededed;
    padding:10px;
    text-align:center;
}
#content {
    padding-bottom:100px; /* Height of the footer element */
    text-align:center;
}
#footer {
    background:#ffab62;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
    text-align:center;
}

Result: