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'

Solution 1:

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

Solution 2:

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.