Have Geek Brain

Using just CSS, is it possible to create a div that completely covers the entire content area of ​​the document?

I'm just wondering if it is possible to use CSS, but not javascript, to create a DIV that will completely cover the entire content area? (note: all content, not just the viewport). This seems impossible because the <body> element has some headroom and there seems to be no easy way to erase the div to include the body element's margin width and height. But is it really possible?

Update : sorry, the requirement is that we cannot set the <body> field to 0 ... (update2: let's say if we need to do this to the library and cannot ask all the people who use it to set the body on stock 0)

+1


a source to share


10 replies


If the <body> margin is set, then could you use negative margins on the <div> to override the <body> margin? I understand <body> fields can vary between browsers. If <body> has a 10px margin, then style your div like so:

div#mydiv {
margin: -10px;
}


You would use the same principle to override padding (if applicable).

+4


a source


Of course I think.

Reset by default:

* { margin: 0; padding: 0; }

then for



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

do:

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


a source


This is probably the solution, but it won't work in IE ...

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


a source


This is logically impossible. Your DIV should go inside the body, not outside.

Or to put it another way, you asked to cover the entire "content area", but you don't really want the entire body to be covered.

Lazlow has a better deal. Maybe set negative margins / padding to something big so you can be sure it's bigger than the browser default and then an inner div with the same margin / padding values ​​only positive?

+3


a source


Yes. you just set the padding and margin of the body tag to 0, then you set the padding and margin of the div tag to zero.

0


a source


how about this?

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


a source


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

anyway, it's always a good idea to normalize your browsers setting for margin, padding, etc. to zero! like Dmitry Farkov above

0


a source


I think there is no way to make the div "float" over your browser, if that is the case then technology can traverse your screen, something like body style = "margin: -40px" - should this be bleeding on your desktop?

And by the way, the html style is not normal, what would you do next? style,?? They're there anyway, so you can set styles on all of them, but I don't think that would be very smart.

I don't know if this could help:

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

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

0


a source


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

0


a source 


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

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


a source






More articles:


All Articles