ansaurus

Question

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

Answer 1

+7 A:

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

Dmitri Farkov 2009-05-25 21:36:08

sorry, please read the update... a requirement is that we can't set the margin of <body> to 0...

動靜能量 2009-05-25 21:44:23

Answer 2

A:

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.

Tom Leys 2009-05-25 21:36:41

Answer 3

A:

what about this?

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

Stijn Sanders 2009-05-25 22:00:32

this is for the viewport... not the whole content area

動靜能量 2009-05-25 22:08:56

Answer 4

+5 A:

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

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

MiffTheFox 2009-05-25 22:03:10

http://tagsoup.com/cookbook/css/fixed/ is a possible fix for IE. Miff's answer is the right way.

Adam A 2009-05-25 22:05:05

this is for the viewport... not the whole content area... and it breaks on IE 6 since fixed is not supported there.

動靜能量 2009-05-25 22:09:15

That's true, but here's my opinion: You wouldn't be able to see any part of the content area uncovered if you cover the viewport. It's technically different, yes, but other than scrolling or not it's all the same to the user.As far as IE6, there's the fix above. It's not perfect, but then again none of these answers work in lynx anyway. =)Also, if you don't want to change the body margins, you'd HAVE to set negative margins or negative left/top on the div to cover the whole content area. And that's really inflexible and ugly.I'm curious as to why you can't change the body margins.

Adam A 2009-05-25 22:33:59

Answer 5

+4 A:

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

Lazlow 2009-05-25 22:14:27

This will work but I still think the requirement is absurd.

annakata 2009-05-27 16:31:25

Answer 6

+3 A:

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?

AmbroseChapel 2009-05-26 01:04:59

Answer 7

A:

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-26 01:39:52

i think there is actually a margin for the body... try html {background:orange} body {background:yellow}

動靜能量 2009-05-26 08:57:47

Answer 8

A:

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-26 15:53:04

Answer 9

A:

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.

clinisbut 2009-09-03 13:55:17

ansaurus

tags:

views:

answers:

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

related questions