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: 
You set your body and html tags to `height: 100%`. This "locks" them to the viewport height and then `#black` inherits that height. You need to use `min-height`:

```
html, body{
    min-height:100%;
}

```

UPDATE:

Forgot to mention something. Add this as well:

```
body {
    position: relative;
}

```
Try this:

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

```

**EDIT:**

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

```