CODEWITHSUNDEEP
htmlcssstylesheet
nonopolarity
nonopolarity

Reputation: 151116

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

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)

Upvotes: 1

Views: 2094

Answers (10)

Mathieu Rodic
Mathieu Rodic

Reputation: 6762

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

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

Upvotes: 0

Pherrymason
Pherrymason

Reputation: 8067

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.

Upvotes: 0

Billeeb
Billeeb

Reputation: 216

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

Upvotes: 0

Reputation:

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

Upvotes: 0

AmbroseChapel
AmbroseChapel

Reputation: 12097

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?

Upvotes: 3

Lazlow
Lazlow

Reputation: 3351

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

Upvotes: 4

MiffTheFox
MiffTheFox

Reputation: 21575

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

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

Upvotes: 7

Stijn Sanders
Stijn Sanders

Reputation: 36850

what about this?

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

Upvotes: 0

Tom Leys
Tom Leys

Reputation: 19029

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.

Upvotes: 0

Dmitri Farkov
Dmitri Farkov

Reputation: 9681

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

Upvotes: 7

Related Questions