Увеличение высоты div при динамической загрузке контента (его высота составляет 100%)

Question

У меня есть div (InnerDiv), который содержит сетку с включенной подкачкой ...
После некоторых действий пользователя данные внутри этой сетки будут загружены, и у нас будет большая сетка!
Проблема в том, что сетказагрузка данных, переполнение нижней части div (InnerDiv) и некоторые из этих данных отображаются из div.

мой css тела и HTML, как показано ниже:

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;
}

мне нужно 100% высоты тела при загрузке страницы ...

OuterDiv внутри тела, как показано ниже:

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 внутри OuterDiv похож на ниже:

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

Содержимое внутри InnerDivКак показано ниже:

#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;
}

эта сетка (Содержимое) находится внутри InnerDiv ...

РЕДАКТИРОВАТЬ 1
нижеприведенный пример может показать мою ситуацию:
Вот пример на 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!

я хочу заставить желтую область (InnerDiv) заполнять всю фиолетовую область ...
также InnerDiv100% высоты из-за фона в начале страницы ...

я знаю эту проблемуих высота около 100%, но как мне это исправить?

РЕДАКТИРОВАТЬ 2:
ПОСЛЕДНИЙ ЗДЕСЬ МОЙ ВЕБ-САЙТ:
МОЙ ВЕБ-САЙТ
PLZ измените высоту красной области с помощью firebug- поэтому, изменив его на 1080px body и OuterDiv и InnerDiv будут расти.
, но при загрузке страницы я хочу body и OuterDiv и InnerDiv 100% высоты.
как я могу это сделать?

заранее спасибо

Answer 1

Вам нужно меньше ограничений на #OuterDiv.Указывая top, bottom, left и right, вы блокируете края #OuterDiv к краям body;и ваше правило тела блокирует тело до того же размера, что и окно просмотра.

Попробуйте изменить правило div#OuterDiv следующим образом:

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

Вот пример на jsFiddle

Answer 2

Из того, что я мог бы извлечь из ваших объяснений и стилей, вы в основном хотите это:

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

Если это правильно, я также объясню, что происходит с каждым div. Еще, пожалуйста, скажите мне, что div ведет себя не так, как вы хотели бы и почему.

Кстати, если возможно, используйте абсолютные пути (целые ссылки) к изображениям. Понимание того, как они должны соответствовать друг другу, поможет всем нам найти то, что подходит вам.