動態調整子和父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

使用一個顯示html內容的iframe。然後，使用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>