How to keep the footer at the bottom with CSS

Sometimes, we use CSS to create a highly adaptive layout, how to ensure that the footer (footer) in the context of not more than one screen is always at the bottom of the layout is a relatively headache. I've seen some examples of using absolute positioning, but it's not always that perfect, and after an afternoon of research, I've summed up a way to achieve this effect by using a negative external patch. Let's look at the following steps:

1, in order for the browser to recognize the height of 100%, we need to first give the HTML and body a height value, while clearing all the elements of margin and padding. Incidentally, after my test, HTML and body of the height:100%; equals the total height of the entire browser window, regardless of whether the content is more than one screen. And their next level child element height:100%; is equal to the height of the first screen. How, is it a little hard to understand?

* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}

2, because of the above mentioned problem, so in order to allow the layout of adaptive height, we want to add min-height:100%, although IE does not support this attribute but IE height:100%; Have the same effect:

#wrapper {
min-height: 100%;
}
* html #wrapper {
height: 100%;
}

In this way, a simple minimum height full screen of the adaptive layout is done. For ease of viewing, I added some width and background color decorations, as follows:

* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
text-align: center;
font: 12px/1.4 Verdana, sans-serif;
background: #f00;
}
#wrapper {
width: 770px;
min-height: 100%;
background: #ccc;
margin: auto;
text-align: left;
}
* html #wrapper {
height: 100%;
}