动态加载内容时增加 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% 的 body 高度...

OuterDiv 位于 body 内，如下所示：

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 如下所示：

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 的示例

我们无法通过执行 height:auto 删除 OuterDiv 的position:absolute或 height:100% 在页面开始时不起作用 ->由于 InnerDiv 背景，outerDiv 应该为 100%，并且记住 InnerDiv 高度在开始时不是 1080px ->页面加载时它只有 200px，并且动态地会更改为 1080px！

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

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

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

提前致谢

Answer 1

您需要减少对 #OuterDiv 的限制。通过指定顶部、底部、左侧和右侧，您可以将 #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 的行为不符合您的意愿以及原因。

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