Question: Why is body, html, and #black sizing to the size of the viewport and not the document height?

```
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style>

html, body{
height:100%;
}

#black{
position:absolute;
width:100%;
min-height:100%;
height:100%;
background-color:#000000;
z-index:1000;
}

#shell{
height:962px;
width:972px;
margin:0 auto;

}
</style>

</head>

<body>
<div id="black"></div>

<div id="shell">

</div>

</body>
</html>

```

Answer: 
Try this:

```
body, html {
    padding: 0;
    margin: 0;
}

```

**EDIT:**

```
#black {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%:
}

```
Because you said so. Saying 

```
#black {
    position: absolute;
    width: 100%;
    height: 100%;
}

```

does set [`width`](http://www.w3.org/TR/CSS2/visudet.html#the-width-property) and [`height`](http://www.w3.org/TR/CSS2/visudet.html#the-height-property) to `100%` of the [containing block](http://www.w3.org/TR/CSS2/visuren.html#containing-block)'s size. The containing block in this case is the [viewport](http://www.w3.org/TR/CSS2/visudet.html#containing-block-details).

When you want `#black` to cover the whole content, you must give it a different containing block. This can be done by [`position`](http://www.w3.org/TR/CSS2/visuren.html#choose-position)ing `body` 

```
body {
    position: relative;
}

```

Now it covers the height. To do the same for the width, you can either set a width on body 

```
body {
    position: relative;
    width: 972px;
}

```

or float body 

```
body {
    position: relative;
    float: left;
}

```

See full [JSFiddle](http://jsfiddle.net/5CkMA/)