CSS layout: Keep the footer at the bottom

Sometimes, we use CSS to create a highly adaptive layout. It is a headache to ensure that the footer stays at the bottom of the layout when the content does not exceed a screen. I have seen some examples of using absolute positioning, but I always feel that it is not so perfect. After one afternoon's research, I found a method to achieve this effect using a negative value patch, which is compatible with ie5.0 +, opera 8.5 + and Firefox 1.5 +. The procedure is as follows:

1. In order for the browser to recognize the height of 100%, we need to add a height value to the HTML and body while clearing the margin and padding of all elements. By the way, after my tests, the height of the HTML and body is 100%; equal to the total height of the entire browser window, regardless of whether the content exceeds a screen. The height of the child elements at the next level is 100%, which is equal to the height of the first screen. Why?
*{
Margin: 0;
Padding: 0;
}
HTML, body {
Height: 100%;
}

2. Because of the problem mentioned above, we need to add Min-Height: 100% to make the layout adaptive height. Although IE does not support this attribute, the height of IE is 100%; it has the same effect:
# Wrapper {
Min-Height: 100%;
}
* Html # wrapper {
Height: 100%;
}

In this way, a simple Adaptive Layout with a minimum height and a full screen is ready. For ease of viewing, I added some width and background color modifiers, as shown below:
*{
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%;
}