<!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;。