1

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

更新：对不起，一个要求是我们不能将 <body> 的边距设置为 0...（更新 2：说，如果我们需要将其放入库并且不能要求所有使用它的人设置身体有边距0）

4

10 回答 10

7

当然，我想。

重置默认边距：

* { margin: 0; padding: 0; }

那么对于

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

做：

#shader {position: absolute; width: 100%; height: 100%; min-height: 100%; top: 0; left: 0;}
于 2009-05-25T21:36:08.423 回答
7

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

div.cover { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; }
于 2009-05-25T22:03:10.257 回答
4

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

div#mydiv {
margin: -10px;
}

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

于 2009-05-25T22:14:27.787 回答
3

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

或者换一种说法，你要求覆盖整个“内容区域”，但这并不是你真正想要的，你想要覆盖整个身体。

Lazlow has the best suggestion. Maybe set the negative margins/padding to something large so you can be sure it's bigger than the browser default, then have an inner div with the same margin/padding values only positive?

于 2009-05-26T01:04:59.050 回答
0

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

于 2009-05-25T21:36:41.950 回答
0

那这个呢？

<div style="position:absolute;left:0px;top:0px;width:100%;height:100%;">...
于 2009-05-25T22:00:32.587 回答
0

Liked Ambrose's answer. The body is ultimate container for your HTML. I have not seen any margins in the body with Mozilla, Chrome, IE, or Opera -- current versions. To prove it: style
body {background-color: yellow;} /*and take a look. */

in any case, it's always a good practice to normalize the browsers setting for margin, padding, etc to zero! like Dmitri Farkov above

于 2009-05-26T01:39:52.503 回答
0

I think there's no way to make the div "float" over your browser, if would so, then the technology could overcome your screen, something like body style="margin: -40px" - should this bleed on your desktop?

And by the way, html styled is abnormal, what would you do next? style , ?? In any case they ARE there so you could set styles on all of them but I don't think it would be much clever.

I don't know if this could help:

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

But I doubt this can overcome the browser window...

于 2009-06-26T15:53:04.963 回答
0

I think MiffTheFox's approach is the best, because its solution covers the situation where other divs has absolute positioning. Remember that absolute positioning elements go off the flow, and if any element is positioned for example at top:9000px, body height will not be >9000px.

于 2009-09-03T13:55:17.630 回答
0 
<style type="text/css">
    #superdiv{ position:fixed; top:0; left:0; width:100%; height:100%; }
</style>

<div id="superdiv">
    Put some content here.
</div>
于 2011-07-08T13:16:24.027 回答