<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { margin:0; padding:0; width:100%; height:100%; }
</style>
</head>
<body>
<div>第1个div</div>
<div>
<div style="margin-top:50px;">itpow</div>
</div>
</body>如上代码，我们为了在 body 底部设置一个背景，于是设置了 html、body 的 height 为 100%。
上述代码运行起来没问题。
但是，如果我们将“第1个div”这行去掉，或者换成 position:fixed 或 position:absolute，使其脱离出来，如下：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { margin:0; padding:0; width:100%; height:100%; }
</style>
</head>
<body>
<div style="position:fixed; top:0; left:0;">第1个div</div>
<div>
<div style="margin-top:50px;">itpow</div>
</div>
</body>这个时候，发现浏览器出现滚动条了。
尽管我们审查代码，发现 body 的 margin 仍然为 0，但是查看 body 的定位框时，发现 body 下移了 50px，这就是导致滚动条出现的原因。
解决办法
给 body 加上 position:absolute;。
