动态加载内容时增加 div 的高度（高度为 100%）

Question

我有一个 div(InnerDiv)，其中包含一个启用分页的网格...
在一些用户操作之后，该网格内的数据将加载，我们将拥有一个大网格！
问题是当网格的数据加载时，会溢出 div 的底部（InnerDiv）并且其中一些数据会显示在 div 之外。

我的 body 和 html 的 css 如下所示：

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
下面的例子可以显示我的情况：
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!

我想强制黄色区域 (InnerDiv) 填充整个紫色区域...
InnerDiv 也应该有 100% 的高度，因为它在页面开始时是背景......

我知道这个问题大约是 100% 高度/但我该如何解决呢？

编辑 2：
最后这里是我的网站：
MY WEB SITE
请用 firebug 更改红色区域的高度 - 所以通过将其更改为 1080px 主体，OuterDiv 和 InnerDiv 将会增长。
但是在页面加载时，我想要 body 和 OuterDiv 和 InnerDiv 100% 高度。
我怎样才能做到这一点？

提前致谢

Answer 1

根据我从你的解释和风格中收集到的信息，你基本上想要这个：

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

如果这是正确的，我还将解释每个 div 发生了什么。否则请告诉我哪些 div 的行为不符合您的意愿以及原因。

顺便说一句，如果可能，请使用图像的绝对路径（整个链接）。了解它们需要如何组合在一起将有助于我们所有人找到适合您的东西。

Answer 2

您需要对#OuterDiv 进行更少的限制。通过指定顶部、底部、左侧和右侧，您将 #OuterDiv 的边缘锁定到 body 的边缘；并且您的主体规则将主体锁定为与视口相同的大小。

尝试像这样更改您的 div#OuterDiv 规则：

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

Here's an example at jsFiddle