using CSS only, is it possible to create a div that covers the whole document content area exactly?

StackOverflow https://stackoverflow.com/questions/908103

  •  05-09-2019
  •  | 
  •  

Question

I just wonder if it is possible to only use CSS but not javascript to style a DIV that will cover up the whole content area exactly? (note: whole content, not just the viewport). It seems not possible because the <body> element has some margin, and it seems like there is no easy way to style the div to include that margin width and height of the body element. But in fact is it possible?

Update: sorry, a requirement is that we can't set the margin of <body> to 0... (update2: say, if we need to make it into a library and can't ask all people who use it to set the body to have margin 0)

Was it helpful?

Solution

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

div#mydiv {
margin: -10px;
}

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

OTHER TIPS

Sure, I think.

Reset default margins:

* { 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;}

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

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

Logically, this is impossible. Your DIV has to go inside the body, not outside.

Or to put it another way, you asked for the whole "content area" to be covered, but that's not actually what you want, you want the entire body to be covered.

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?

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.

what about this?

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

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

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...

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.

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

<div id="superdiv">
    Put some content here.
</div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top