Minimum height 100% footer stay at bottom of layout method

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+. 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%;} 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead><meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/><title>example 2</title><style type=" Text/css ">/*<!" [cdata[*/* {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%;} #header {background:green; height:40px;} #sidebar {float:left; width:200px; background:gray;} #content-box {float:right; width:570px; background:olive;} #footer {height:50px; background:background; width:770px; margin:auto;} /*]]>*/</style></pead><body><div id= "wrapper" > <div id= "header" > Show id "header" here Content </div> <div id= "Content-box" > show IDs here content-Box "Content </div> <div id=" sidebar "> here displays the contents of the id" sidebar "</div></div><div id=" Footer "> shown here Contents of id "Footer" </div></body></ptml>

3, plus the page header footer and Content section, in order to let footer at the bottom, we certainly want to footer "please out" wrapper. Of course, this height is more than a screen, don't worry, there is a solution behind.

#header {background:green;height:40px;} #sidebar {Float:left;width:200px;background:gray;} #content-box {float:right;width:570px;background:olive} #footer {Height:50px;background:background;width:770px;margin:auto;}

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead><meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/><title>example 2</title><style type=" Text/css ">/*<!" [cdata[*/* {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%;} #header {background:green; height:40px;} #sidebar {float:left; width:200px; background:gray;} #content-box {float:right; width:570px; background:olive;} #footer {height:50px; background:background; width:770px; margin:auto;} /*]]>*/</style></pead><body><div id= "wrapper" > <div id= "header" > Show id "header" here Content </div> <div id= "Content-box" > show IDs here content-Box "Content </div> <div id=" sidebar "> here displays the contents of the id" sidebar "</div></div><div id=" Footer "> shown here Contents of id "Footer" </div></body></ptml>

4, in order to let footer can just at the bottom, we can give footer plus a height equal to the top of the negative margin force it upward to push a height of its own, that is margin-top: -50px; But in this case, when the content is more than one screen, we will see that the content will cover the top of the footer, which is obviously a failure. So we also want to add a parent element to Content-box and sidebar, set its bottom patch equal to the footer height, forcing the Content-box and sidebar to push up a footer height. Also, because Content-box and sidebar are floating elements, we have to let it close the floating element. This is more perfect.

#out-content {padding-bottom:50px} #out-content:after {  clear:both;  Display:block;  font:1px/0px serif;  Content: ".";  height:0;  Visibility:hidden;} * HTML #out-content {height:1%} #footer {height:50px;background:background;margin: -50px auto 0;}

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead><meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/><title>footer stick</title><style type=" Text/css ">/*<!" [cdata[*/* {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%;} #header {background:green; height:40px;} #out-content {padding-bottom:50px} #out-content:after {clear:both; Display:block; font:1px/0px serif; Content: "."; height:0; Visibility:hidden;} * HTML #out-content {height:1%} #sidebar {float:left; width:200px; background:gray;} #content-box {float:right; width:570px; background:olive;} #footer {height:50px; background:background; width:770pX Margin: -50px auto 0;} /*]]>*/</style></pead><body><div id= "wrapper" > <div id= "header" > <p>header </p> <code> #header {background:green; height:40px; }</code> </div> <div id= "out-content" > <div id= "Content-box" > <p>content</p&gt ; <code> #content {float:right; width:80%; background:olive; } </code><code> #content {float:right; width:80%; background:olive; } </code></div> <div id= "sidebar" > <p>sidebar</p> <code> #sidebar { Float:left; width:20%; Background:gray; }</code> </div> </div></div><div id= "Footer" > <p>footer</p> <code > #footer {height:50px; Background:background; width:770px; Margin: -50px auto 0; }</code> </div></body></ptml>

5, extrapolate, using the above principle we can also make a fixed width side of the adaptive width of the liquid elastic layout, modify some of the width and then give #content-box below a layer can be achieved. <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead><meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/><title>footer stick</title><style type=" Text/css ">/*<!" [cdata[*/* {margin:0; padding:0;} HTML, body {height:100%; text-align:center; font:12px/1.4 Verdana, Sans-serif;} #wrapper {width:100% min-height:100%; background: #ccc; margin:auto; text-align:left;} * HTML #wrapper {height:100%;} #header {background:green; height:40px;} #out-content {padding-bottom:50px} #out-content:after {clear:both; Display:block; font:1px/0px serif; Content: "."; height:0; Visibility:hidden;} * HTML #out-content {height:1%} #sidebar {float:left; background:gray; margin-right: -200px; width:200px;} #content-box {float:right; width:100%; background:olive;} #content {margin-left:200px;} #footer {height:50px; baCkground:background; Margin: -50px auto 0;} /*]]>*/</style></pead><body><div id= "wrapper" > <div id= "header" > <p>header </p> <code> #header {background:green; height:40px; }</code> </div> <div id= "out-content" > <div id= "Content-box" > <div id= "Content" > <p>content</p> <code> #content {float:right; width:80%; background:olive; } </code></div> </div> <div id= "sidebar" > <p>sidebar</p> <code&gt ; #sidebar {float:left; width:20%; Background:gray; }</code> </div> </div></div><div id= "Footer" > <p>footer</p> <code > #footer {height:50px; Background:background; width:770px; Margin: -50px auto 0; }</code> </div></body></ptml> Other questions, if someone wants the middle two column height to be the same, you can use the image spoofing method, see Create each column the same height of the multi-column layout. OK, after the above method, this layout should be more perfect.