Increasing height of a div while dynamically loading content (it's height is 100%)

I have a div(InnerDiv) which contains a grid with paging enabled...

After some user actions , data inside that grid will load and we will have a big grid!

The problem is when grid's data loads , overflow the div's bottom portion(InnerDiv) and some of those data get's displayed out of the div.

my css of body and html like below :

html, body
{
    margin: 0; /* get rid of default spacing on the edges */
    padding: 0; /* get rid of default spacing on the edges */
    border: 0; /* get rid of that 2px window border in Internet Explorer 6 */
    height: 100%; /* fill the height of the browser */
    border:3px solid red;
}

i need 100% height of body when page loads...

OuterDiv inside body like below :

div#OuterDiv
{
    position:absolute;
    width: 100%;
    height: 100%;
    /*height: auto;*/
 开发者_StackOverflow社区   margin: 0px;
    padding: 0px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border:5px solid green;
}

InnerDiv Inside OuterDiv Is Like Below :

div#InnerDiv
{
    position: relative;
    width: 100px;
    height: 100%;
    margin: 0 auto;
    background: transparent url('../Images/Blue.png') repeat scroll left top;
}

Content Inside InnerDiv Like Below :

#Content
{
    position: relative;
    top: 10px;
    background: transparent url('../Images/Red.png') repeat scroll left top;
    width: 550px;
    height: 1080px; /*>>>>>>>>>>>>>>>>>>> plz see this line*/
    top: 10px;
    right: 10px;
    padding: 7px;
    border: 10px ridge #ce004e;
    color: black;
}

that grid(Content) is inside InnerDiv...

EDIT 1

the below example can show my situation :

Here's an example at jsFiddle

we can not remove position:absolute of OuterDiv , by doing that height:auto or height:100% on it does not work at page start -> outerDiv should be 100% because Of InnerDiv Background and remember InnerDiv height is not 1080px at start -> it is only 200px at page load and dynamically it will change to 1080px!

i want to force yellow area (InnerDiv) to fill entire Purple Area...

also InnerDiv Should Have 100% Height Because Of It's Background At Page Start...

i know this problem is about 100% height / but how can i fix that ?

EDIT 2 :

AT LAST HERE IS MY WEB SITE :

MY WEB SITE

plz change the height of red area with firebug - so by changing it to 1080px body and OuterDiv And InnerDiv Will grow.

but at page load i want body and OuterDiv And InnerDiv 100% height.

how can i do that?

thanks in advance

---

You need less constraints on #OuterDiv. By specifying top, bottom, left, and right, you're locking the edges of #OuterDiv to the edges of body; and your body rule locks body to the same size as the viewport.

Try changing your div#OuterDiv rule like this:

div#OuterDiv
{
    position:absolute;
    margin: 0px;
    padding: 0px;
    border: 5px solid green;
}

Here's an example at jsFiddle

---

From what I could gather from your explanation and styles you basically want this:

http://jsfiddle.net/sg3s/zXSXx/

If this is correct I will also explain what is happening to each div. Else please tell me what div is behaving not as you would like and why.

By the way if possible use absolute paths (whole links) to images. Seeing how they need to fit together will help us all to find something that works for you.