Question

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

我的css of body和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 Inside OivDiv就像下面这样：

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
plz用萤火虫改变红色区域的高度 - 所以通过将其改为1080px的身体，OuterDiv和InnerDiv将会增长。
但在页面加载时我想要身体和OuterDiv和InnerDiv 100％的身高我怎样才能做到这一点？

提前致谢

Answer 1

#OuterDiv需要的约束更少。通过指定顶部，底部，左侧和右侧，您可以将#OuterDiv的边缘锁定到body的边缘;并且您的正文规则将body锁定为与视口相同的大小。

尝试更改div#OuterDiv规则，如下所示：

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

Here's an example at jsFiddle

Answer 2

从我的解释和风格中我可以收集到的，你基本上想要这个：

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

如果这是正确的，我还将解释每个div发生的事情。另外请告诉我div的行为不是你想要的以及为什么。

顺便说一下，如果可能的话，使用绝对路径（整个链接）到图像。看看他们如何融合在一起将有助于我们所有人找到适合自己的东西。

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

2 个答案: