css div auto fill all available space inside of document

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 开发者_如何学Cpad 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

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.

Here is a jsfiddle example.

Essentially, you need to set your containing element to width:100% and give it 10px of padding on left and right (padding:0 10px). Then, you can set your inner elements to width:100% and they will only go to within 10px of the max document width.

You could try either giving the div a width and height of 95-99%, but that won't always guarantee a space of 10px. You could do the 10px of padding on either the body or the div and just assign overflow:hidden to the body if you're planning on having all your content in one place.

If you want it fixed over the page, you could use positioning: <div style="position:fixed; top: 10px; left: 10px; right: 10px; bottom: 10px; background-color: rgba(155, 155, 155, .6);">Some text</div>