1、把html和body的height属性设为100%;保证content的高度能撑满浏览器;
2、把#content的高度也设置为100% ，但是这里我们使用了“min-height”属性，而不是的height属性，这是因为如果#main中的内容如果增加了，他的高度超过了浏览器窗口的高度，那么如果把#content的高度仍然是100%，就会导致#footer仍然定位在浏器窗口的下端，从而遮盖了#content中的内容。
3、将#content设置为相对定位，目的是使他成为它里面的#footer的定位基准然后把#foooter设置为绝对定位，并使之贴在#main的最下端。
注意，如果当我们把#footer贴在#content的最下端以后，他实际上已经和上面的#main这个div重叠了，为了避免覆盖#main中的内容，我们在#main中设置了下侧的padding，使padding-bottom的值等于#footer的高度，就可以保证避免覆盖#main的文字了。
<style>
body,html {margin: 0;padding: 0;height:100%;
}
#content {min-height:100%;position: relative;
}
#main {padding: 10px;padding-bottom: 60px;
}
#footer {position: absolute;bottom: 0;padding: 10px 0;width: 100%;
}
#footer h1 {font: 20px/2 Arial;margin:0;padding:0 10px;
}
</style>
<body><div id="content">
<div id="main"><h1>main</h1><p>你可以改变浏览器窗口的高度，来观察footer效果。</p><p>文字文字文字文字文字文字文字文字文字文字</p></div><div id="footer"><h1>Footer</h1><div></div>
</body>