动态加载内容时增加div的高度(高度为100％) [英] Increasing height of a div while dynamically loading content (it's height is 100%)

问题描述

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

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's data loads , overflow the div's bottom portion(InnerDiv) and some of those data get's displayed out of the div.

我的CSS和HTML的CSS如下:

my css of body and html like below :

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％的身高...

i need 100% height of body when page loads...

OuterDiv如下所示:

OuterDiv inside body like below :

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如下:

InnerDiv Inside OuterDiv Is Like Below :

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

InnerDiv内部的内容如下:

Content Inside InnerDiv Like Below :

#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内部...

that grid(Content) is inside InnerDiv...

编辑1
以下示例可以显示我的情况:
这是jsFiddle的示例

EDIT 1
the below example can show my situation :
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％的高度，因为它是页面开始时的背景...

i want to force yellow area (InnerDiv) to fill entire Purple Area...
also InnerDiv Should Have 100% Height Because Of It's Background At Page Start...

我知道这个问题大约是100％的身高/但是我该如何解决呢?

i know this problem is about 100% height / but how can i fix that ?

最后，这是我的网站:
我的网站
请使用萤火虫更改红色区域的高度-通过将其更改为1080px主体，OuterDiv和InnerDiv将会增长.
但是在页面加载时，我希望正文和OuterDiv和InnerDiv的高度为100％.
我怎样才能做到这一点?

EDIT 2 :
AT LAST HERE IS MY WEB SITE :
MY WEB SITE
plz change the height of red area with firebug - so by changing it to 1080px body and OuterDiv And InnerDiv Will grow.
but at page load i want body and OuterDiv And InnerDiv 100% height.
how can i do that?

预先感谢

推荐答案

从您的解释和样式中可以得出的结论是，您基本上想要这样:

From what I could gather from your explanation and styles you basically want this:

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

如果这是正确的话，我还将解释每个div发生了什么.否则，请告诉我，什么是div行为不如预期，为什么.

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.

这篇关于动态加载内容时增加div的高度(高度为100％)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！