动态调整子级和父级div高度

I have a website that is embedding another html file in it, it look like this:

我有一个网站,其中嵌入了另一个html文件,它看起来像这样:

If I click on the the arrow, the inner webpage is expanded to show its contents like this:

如果我点击箭头,内部网页将展开以显示其内容,如下所示:

The problem is, I get two scroll bars (an inner and the regular website scrollbar). I only want the outer scrollbar (the regular website scrollbar). So I want my parent and child div height to dynamically grow and I am having trouble figuring out how. I tried all the overflowproperties. But I could have been setting them wrong.

问题是,我得到两个滚动条(内部和常规网站滚动条)。我只想要外部滚动条(常规网站滚动条)。所以我希望我的父母和孩子的div高度能够动态增长,而我却无法弄清楚如何。我尝试了所有的overflowproperties。但我本可以把它们搞错了。

I am changing my inner div like so:

我正在改变我的内部div:

document.getElementById("versionsContent").innerHTML = '<object class="versionsContent" type="text/html" data="TEST-iPhoneTGxD22SmokeTest.html" width="800px" style="float:left"/>';

My HTML definition of this div is:

我对此div的HTML定义是:

        <div id="versionsContent" class="versionsContent">
            <object class="versionsContent" type="text/html" data="TEST-iPhoneTGxD22SmokeTest.html" width="800px"/>
        </div>

And my relevant CSS definitions are:

我的相关CSS定义是:

body
{
 background-color: CCCCCC;
}
.versionsContent
{
 font: 18pt Arial,Helvetica !important;
 font-weight: 30 !important;
 background-color: 444444 !important;
 overflow: hidden;
 min-height: 100%;
 text-align: center;
 align-content: center;
 padding: 35px !important;
 width: 95%;
 margin: 0 auto;
}

1 个解决方案

#1

Use an iframe to show html content. Then, use javascript to set the iframe's height according to its content.

使用iframe显示html内容。然后,使用javascript根据其内容设置iframe的高度。

<script language="JavaScript">

function setSize(id){
    var newheight;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
    }

    document.getElementById(id).height= (newheight) + "px";
}
</script>

<iframe src="TEST-iPhoneTGxD22SmokeTest.html" width="800px" id="iframe1" marginheight="0" frameborder="0" onLoad="setSize('iframe1');"></iframe>