css div auto fill all available space inside of document

Question

I am trying to get a div that is the document's width and height. Minus 10 pixels all around as in this picture: http://screensnapr.com/v/a9JWIf.png

But every time I pad or add to the margin of the body or outer div, it adds to the document's total height and shows scrollbars.

How can I make a div auto fill all available size without extending the size of the document?

edit: any negative margins do not effect the divs total size

Here is a fiddle http://jsfiddle.net/ZRz32/6/

As you can see, it extends the document height. I need it to stay the document's size minus ten pixels all around

Answer 1

I think that it's the easiest way to do it:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#container {
    width: 100%;
    height: 100%;
}
#main {
    position: absolute;
    height: auto;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    margin: 10px;
    background-color: green;
}

<div id="container">
    <div id="main"></div>
</div>

I updated your Fiddle here.