1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>aa</title> 7 <style type="text/css"> 8 body,html { 9 margin: 0; 10 padding: 0; 11 font: 12px/1.5 arial; 12 height:100%; 13 } 14 #content { 15 min-height:100%; 16 position: relative; 17 } 18 #main { 19 padding: 10px; 20 padding-bottom: 60px; 21 } 22 #footer { 23 position: absolute; 24 bottom: 0; 25 padding: 10px 0; 26 background-color: #AAA; 27 width: 100%; 28 } 29 #footer h1 { 30 font: 20px/2 Arial; 31 margin:0; 32 padding:0 10px; 33 } 34 </style> 35 </head> 36 <body> 37 <div id="content"> 38 <div id="main"> 39 <h1>main</h1> 40 <p>你可以改变浏览器窗口的高度，来观察footer效果。</p> 41 <p>文字文字文字文字文字文字文字文字文字文字</p> 42 </div> 43 <div id="footer"> 44 <h1>Footer</h1> 45 <div> 46 </div> 47 </body> 48 </html>
首先把HTML和BODY的HEIGHT属性设为100%;保证content的高度能撑满浏览器;
然后把#content的高度也设置为100% ，但是这里我们使用了“min-height”属性，而不是的height属性，这是因为如果#main中的内容如果增加了，他的高度超过了浏览器窗口的 高度，那么如果把#content的高度仍然是100%，就会导致#footer仍然定位在浏器窗口的下端，从而遮盖了#content中的内容。
而使用min-height属性的作用就是使#content的高度“至少”为浏览器窗口的高度，而当如果它里面的内容增加了，他的高度会也跟随着增加，这才是我们需要的效果。
接下来，将#content设置为相对定位，目的是使他成为它里面的#footer的定位基准
然后把#foooter设置为绝对定位，并使之贴在#main的最下端。
但是要注意，如果当我们把#footer贴在#content的最下端以后，他实际上已经和上面的#main这个div重叠了，为了避免覆盖#main中 的内容，我们在#main中设置了下侧的padding，使padding-bottom的值等于#footer的高度，就可以保证避免覆盖#main的 文字了。