CSS footer at the bottom with certain conditions

Question

Is it possible to create footer that will be at the bottom of the page and when page height is for example 500px, then footer would stay at that place and not be at the bottom after that height value?

This footer will stay at the bottom ok, but when page height is under 500px it will still be there, so is it possible to use CSS to make such a rule ?

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
}

Answer 1

@newbie; may be that's you have to do.

css:

.wrapper {
    position: relative;
    width: 700px;
    font-size: 0.9em;
    margin: 0 auto -142px;
    background:yellow;
}
.header {
    height: 190px;
    background:green;
}

.footer {
    position: relative;
    width: 700px;
    margin: 0 auto;
    background:red;
}

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px;
.footer, .push {
    height: 142px;
}

check this example http://jsfiddle.net/sandeep/tCdPX/3/

check this for more stickyfooter

Answer 2

use fixed instead of absolute

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
}