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

【问题标题】：using CSS only, is it possible to create a div that covers the whole document content area exactly?仅使用 CSS，是否可以创建一个完全覆盖整个文档内容区域的 div？
【发布时间】：2011-07-08 21:16:24
【问题描述】：

我只是想知道是否可以只使用 CSS 而不是 javascript 来设置 DIV 的样式，从而完全覆盖整个内容区域？（注意：整个内容，而不仅仅是视口）。这似乎是不可能的，因为

元素有一些边距，而且似乎没有简单的方法来设置 div 的样式以包含 body 元素的边距宽度和高度。但实际上有可能吗？

更新：抱歉，要求是我们不能将

的边距设置为 0...（更新 2：比如说，如果我们需要将其放入库中并且可以'不要要求所有使用它的人将 body 设置为 margin 0)

【问题讨论】：

我原以为您可以将<body> 的边距、填充和边框设置为零。
我们能知道为什么你不能将body的margin设置为0吗？
这是一个荒谬的要求——你要么被允许开发，要么你不能，没有理由说“这个技术的这个子集是禁区”。仍然有办法（请参阅 Lazlow 的回答），但我会非常不高兴我的手被这样任意捆绑。
原因是如果我们把它变成一个库......我们不能要求所有使用这个包的人都将 body 设置为 margin 0。

标签： html css stylesheet

【解决方案1】：

当然，我想。

重置默认边距：

* { margin: 0; padding: 0; }

那么对于

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

做：

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

【讨论】：

对不起，请阅读更新...要求是我们不能将的边距设置为 0...

【解决方案2】：

这可能是一个解决方案，但它在 IE 中不起作用...

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

【讨论】：

tagsoup.com/cookbook/css/fixed 是 IE 的一种可能修复方法。米夫的回答是对的。
这是用于视口的...不是整个内容区域...它在 IE 6 上中断，因为那里不支持固定。
确实如此，但这是我的观点：如果您覆盖视口，您将无法看到内容区域的任何部分。它在技术上是不同的，是的，但除了滚动与否之外，它对用户来说都是一样的。至于IE6，上面有修复。这并不完美，但无论如何，这些答案在 lynx 中都不起作用。 =) 此外，如果您不想更改正文边距，则必须在 div 上设置负边距或负左/上边距以覆盖整个内容区域。这真的很不灵活和丑陋。我很好奇为什么你不能改变身体边缘。

【解决方案3】：

如果设置了

边距，那么你不能在

上使用负边距来覆盖边距吗？我了解边距可能因浏览器而异。如果有 10px 的边距，那么设置 div 的样式如下：

div#mydiv {
margin: -10px;
}

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

【讨论】：

【解决方案4】：

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

或者换句话说，您要求覆盖整个“内容区域”，但这并不是您真正想要的，您希望覆盖整个主体。

Lazlow 有最好的建议。也许将负边距/填充设置为较大的值，这样您就可以确定它比浏览器默认值大，然后有一个内部 div 具有相同的边距/填充值只有正值？

【讨论】：

【解决方案5】：

是的。您只需将 body 标签的 padding 和 margin 设置为 0，然后将 div 标签的 padding 和 margin 设置为零。

【讨论】：

【解决方案6】：

这个呢？

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

【讨论】：

这是针对视口的...不是整个内容区域

【解决方案7】：

喜欢安布罗斯的回答。正文是 HTML 的终极容器。我没有看到 Mozilla、Chrome、IE 或 Opera（当前版本）的正文有任何边距。为了证明这一点：风格
body {background-color: yellow;} /*看看。 */

在任何情况下，将浏览器的边距、内边距等设置标准化为零总是一个好习惯！就像上面的德米特里·法尔科夫（Dmitri Farkov）

【讨论】：

我认为正文实际上有一个边距...尝试 html {background:orange} body {background:yellow}

【解决方案8】：

我认为没有办法让 div 在您的浏览器上“浮动”，如果是这样，那么该技术可以克服您的屏幕，例如 body style="margin: -40px" - 这应该在您的桌面上流血吗？

对了，html styled 不正常，接下来怎么办？风格，？？无论如何，它们都在那里，因此您可以为所有它们设置样式，但我认为这不会很聪明。

我不知道这是否有帮助：

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

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

【讨论】：

【解决方案9】：

我认为MiffTheFox的做法是最好的，因为它的解决方案涵盖了其他div有绝对定位的情况。请记住，绝对定位元素会脱离流程，并且如果任何元素定位在例如 top:9000px，则主体高度不会>9000px。

【讨论】：

【解决方案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>

【讨论】：