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

Question

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

如果我点击箭头，内部网页会展开，以显示如下内容：

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

我正在改变我的内心div：

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

我对此div的HTML定义是：

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

我的相关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;
}

Answer 1

使用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>