CSS layout: A way to keep the bottom of the footer always

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 have seen some examples of using absolute positioning, but the total feeling is not so perfect, after an afternoon study summed up a negative external patch to achieve this effect of the method, compatible with Ie5.0+,opera 8.5+,firefox 1.5+. Next we look at the 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 to adapt to the height, we want to add min-height:100%; Although IE does not support this attribute but IE of height:100%; Has the same effect: #wrapper {min-height:100%} * HTML #wrapper {height:100%} so that an adaptive layout with the simplest minimum height full screen is done. For ease of viewing, I added some width and background color modifiers, as follows: * {margin:0; padding:0;} html, body {height:100%; text-align:center; font:12px/1.4 Verdan A, Sans-serif; Background: #f00; } #wrapper {width:770px min-height:100%; background: #ccc; margin:auto; text-align:left;} * HTML #wrapper {height: 100%; }