html、body 100% 后,内部元素 margin-top 使 body 下移的问题

作者:vkvi 来源:千一网络(原创) 日期:2021-7-3
<!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;

相关文章