使DIV覆盖视口的100%而不是100%的身体

Question

我需要让目前覆盖100%视口的黑盒子覆盖整个页面.如果您的屏幕需要滚动条来查看网站,您将只能注意到这一点 - 否则它看起来很好.

我有重叠的div设置为:

position: absolute;
height: 100%;
width: 100%;

我也有身体设置:

height: 100%;
margin: 0px 0px;
padding: 0px; 0px;

但由于某些原因我的笔记本电脑向下滚动,我看到DIV的边缘,没有任何东西在它下方被阻挡.

这样做的目的是为网站创建一个自定义灯箱.我已经禁用了使框变暗的Javascript,以便您可以看到效果.

如何使其覆盖整个页面,而不仅仅是视口？

(我的笔记本电脑是1366x768,所以你可能会在高度分辨率<= 760的任何东西上看到它.

Answer 1

该<div>需求是

top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100%;
background-color: red;

然后它将保持在视口的尺寸内并使用滚动条"移动".

编辑:如果设置<body>为样式,它将仅覆盖整个视口

margin: 0;
padding: 0;