Css div automatically fills all the free space inside the document

Question

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

But every time I overlay or add to the edge of the body or the outer div, it adds to the overall height of the document and shows the scroll bars.

How can I make a div automatically fill in all available sizes without increasing the size of the document?

edit: any negative fields do not affect the overall size of the divs

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

As you can see, it expands the height of the document. I need the size of the document to not exceed ten pixels.

Answer 1

I think this is the easiest way to do this:

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 feed here .

Answer 2

Here is a jsfiddle example .

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

Answer 3

div a width, height of 95-99%, 10px. 10px body div overflow:hidden body, .

Answer 4

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