body元素是自适应高度的块级元素，当页面内容比较少时，它的高度会小于默认浏览器的可是区域高度；html元素的高度是默认等于浏览器视窗的高度的
从文档结构上来说 body是html的子元素，按道理设置body{ height:100%;},可以让它和html元素高度相等，实际发现没没效果。需要设置 html,body{height:100%}才能让两者的高度相等
测试代码如下：
<!DOCTYPE html> <html> <head> <style> html{height:100%; background:yellow;} body{height:100%; background:#eee;} .pos{background:blue; height:300px; border:1px solid red; } .hi{background-image:url("s.jpg"); background-repeat:no-repeat; background-position:20px 40px; } </style> </head> <body> <p class="pos hi">some text here </p> <script> alert(document.documentElement.clientHeight); alert(document.body.clientHeight); </script> </body> </html>