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

cssheighthtmloverflow

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;*/
    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

Best Answer

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

Related Topic