Question

我只是想知道是否可以只使用CSS而不是javascript来设计一个能完全覆盖整个内容区域的DIV？（注意：整个内容，而不仅仅是视口）。这似乎是不可能的，因为＆lt; body＆gt; element有一些余量，似乎没有简单的方法来设置div的样式以包含body元素的边距宽度和高度。但实际上有可能吗？

更新：抱歉，要求我们无法设置＆lt; body＆gt;的边距到0 ...（更新2：说，如果我们需要将它变成一个库，并且不能要求所有使用它的人设置主体有边距0）

Answer 1

当然，我想。

重置默认边距：

* { margin: 0; padding: 0; }

然后是

<div id="shader"></div>

做的：

#shader {position: absolute; width: 100%; height: 100%; min-height: 100%; top: 0; left: 0;}

Answer 2

这可能是一个解决方案，但它不适用于IE ...

div.cover { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; }

Answer 3

如果＆lt; body＆gt;保证金设置，然后你不能在＆lt; div＆gt;上使用负边距覆盖＆lt; body＆gt;利润？我理解＆lt; body＆gt;边距可能因浏览器而异。如果＆lt; body＆gt;有10px的余量，然后像你这样设计你的div：

div#mydiv {
margin: -10px;
}

您使用相同的原则来覆盖填充（如果适用）。

Answer 4

从逻辑上讲，这是不可能的。你的DIV必须进入体内，而不是进入体外。

或者换句话说，你要求覆盖整个“内容区域”，但实际上并不是你想要的，你希望覆盖整个身体。

Lazlow有最好的建议。也许将负边距/填充设置为大的值，这样你就可以确定它比浏览器默认值更大，那么内部div的边距/填充值是否只有正值？

Answer 5

是。你只需将body标签的填充和边距设置为0，然后将div标签的填充和边距设置为零。

Answer 6

这是怎么回事？

<div style="position:absolute;left:0px;top:0px;width:100%;height:100%;">...

Answer 7

喜欢安布罗斯的回答。正文是HTML的终极容器。我没有看到Mozilla，Chrome，IE或Opera当前版本中的任何边缘。证明：风格
body {background-color：yellow;} / *并看看。 * /

在任何情况下，将边距，填充等的浏览器设置规范化为零始终是一个好习惯！像Dmitri Farkov上面

Answer 8

我认为没有办法让div“漂浮”在你的浏览器上，如果是这样的话，那么技术可以克服你的屏幕，就像身体风格=“margin：-40px” - 这应该在你的桌面上流血吗？

顺便说一句，html样式是不正常的，接下来你会做什么？风格，??在任何情况下，他们都在那里，所以你可以设置所有这些风格，但我不认为它会更聪明。

我不知道这是否有帮助：

<div style="margin:-100%">

但我怀疑这可以克服浏览器窗口......

Answer 9

我认为MiffTheFox的方法是最好的，因为它的解决方案涵盖了其他div具有绝对定位的情况。请记住，绝对定位元素会离开流动，如果任何元素位于顶部：9000px，则身高不会> 9000px。

Answer 10

<style type="text/css">
    #superdiv{ position:fixed; top:0; left:0; width:100%; height:100%; }
</style>

<div id="superdiv">
    Put some content here.
</div>

仅使用CSS，是否可以创建一个完全覆盖整个文档内容区域的div？

10 个答案: