CSS footer at the bottom with certain conditions

问题

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;
}

回答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

回答2:

use fixed instead of absolute

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

来源：https://stackoverflow.com/questions/6544999/css-footer-at-the-bottom-with-certain-conditions