1. <html></html>的高度是窗口大小<body></body>的高度是里面内容的高度
2. 想实现这个，就要给body min-height：100%所以刚开始内容少时body的高度也可以撑满窗口大小，内容翻页时高度已经大与 100%了，就无所谓了
为了把body做为父元素把内容都放到这里面而不是浏览器窗口，所以body设置position:relative
<html> <head> <title>内容小与一页时footer在页面底部，内容大与一页时footer在内容下面</title> </head> <body style="min-height: 100%;position: relative;"> <div style="background-color:grey;text-align:center;"> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> content</br> </div> <div style="position:absolute;height:50px;background-color:blue;bottom: 0;left:0;right:0;"> </div> </body> </html>