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

nop*_*ole 1 html css stylesheet

我只是想知道是否可以只使用CSS而不是javascript来设计一个能完全覆盖整个内容区域的DIV?(注意:整个内容,而不仅仅是视口).这似乎是不可能的,因为<body>元素有一些边距,似乎没有简单的方法来设置div的样式以包含body元素的边距宽度和高度.但实际上有可能吗?

更新:抱歉,要求是我们无法将<body>的边距设置为0 ...(更新2:如果我们需要将其设置为库而不能要求所有使用它的人设置身体有边缘0)

Dmi*_*kov 7

当然,我想.

重置默认边距:

* { margin: 0; padding: 0; }
Run Code Online (Sandbox Code Playgroud)

那么

<div id="shader"></div>
Run Code Online (Sandbox Code Playgroud)

做:

#shader {position: absolute; width: 100%; height: 100%; min-height: 100%; top: 0; left: 0;}
Run Code Online (Sandbox Code Playgroud)


Mif*_*Fox 6

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

div.cover { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; }
Run Code Online (Sandbox Code Playgroud)

  • 这是真的,但我的观点是:如果覆盖视口,您将无法看到内容区域的任何部分被覆盖.它在技术上是不同的,是的,但除了滚动之外,它对用户来说都是一样的.就IE6而言,上面有修复.它并不完美,但是无论如何,这些答案都不会在lynx中起作用.=)此外,如果您不想更改正文边距,则必须在div上设置负边距或负左/顶部以覆盖整个内容区域.这真的是不灵活和丑陋的.我很好奇为什么你不能改变身体边缘. (2认同)