CSS height 100% issue

Question

I know there are a lot of questions about a css 100% height problem. However I\'ve tried to follow the instructions there and still the height isn\'t 100%, so I thought I\'d

Answer 1

@denappel; give html & body 100% height put footer outside of your main div wrapper & give margin-bottom in minus according to the height of footer.

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/

this functionally called stickyfooter