2 iframe的一個頁面，第二個iframe來自動高度

我想實現這個代碼的第二個iframe的自動調整大小，2 iframe的一個頁面，第二個iframe來自動高度

任何幫助，將不勝感激。

CSS

* { 
    margin: 0; 
    padding: 0 
} 
html, body { 
    height: 100%; 
    width: 100%; 
    overflow: hidden 
} 
table { 
    width: 100%; 
    table-layout: static; 
    border-collapse: collapse 
} 
iframe { 
    width: 100% 
} 
.header { 
    border-bottom: 1px solid #000 
} 
.content { 
    height: 100% 
}

HTML

<table> 
    <tr> 
     <td class="header"><div><h1>Header</h1></div></td> 
    </tr> 
    <tr> 
     <td class="content"><iframe name="iFrame1" height="85" src="Materials AU Stocked Header.htm" scrolling="no" frameborder="1"></td> 
    </tr> 
    <tr> 
     <td class="content"><iframe name="iFrame2" height="100%" src="Materials AU Stocked.htm" scrolling="yes" frameborder="1"></td> 
    </tr> 
</table>

來源

2012-11-29 Shane

如果可能，請不要使用框架！ – rekire

你不應該使用表來做佈局。 – 3dgoo

我不確定這是否可行，這兩個文件是由Business Objects生成的，我需要將它們中的兩個合併爲一個頁面。全部從文件本地打開，沒有使用網絡服務器。 – Shane

你可以用你的第二個iframe和指定top，bottom，left和right做到這一點使用position: absolute。

這需要您的#header和第一個iframe有一個固定的高度。

注意我爲了測試目的在iframe src中放置了一些外部網站。將這些替換爲您想要的html頁面。

HTML

<div id="header"> 
    <h1>Header</h1> 
</div> 
<iframe id="iFrame1" name="iFrame1" src="http://yahoo.com"></iframe> 
<div id="iFrame2Container"> 
    <iframe id="iFrame2" name="iFrame2" src="http://yahoo.com"></iframe> 
</div>

CSS

* { 
    margin: 0; 
    padding: 0 
} 
html, body { 
    height: 100%; 
    width: 100%; 
    overflow: hidden 
} 
#header { 
    border-bottom: 1px solid #000; 
    height: 19px; 
} 

#iFrame1 { 
    height: 80px; 
    width: 100%; 
    border: none; 
    overflow: hidden; 
} 
#iFrame2Container { 
    position: absolute; 
    top: 100px; 
    left: 0px; 
    bottom: 0px; 
    right: 0px; 
} 
#iFrame2 { 
    width: 100%; 
    height: 100%; 
    border: none; 
}

Demo

，我在你的代碼注意到了一些額外的事情

你不應該使用表格佈局
你不應該把空間在你的HTML文件名
- 重命名Materials AU Stocked Header.htm到事端像Materials-AU-Stocked Header.htm
關閉標籤打開
- 之後需要</iframe>

來源

2012-11-29 07:04:27 3dgoo

感謝3dgoo，工作完美，正是我之後的工作 – Shane

2 iframe的一個頁面，第二個iframe來自動高度

回答

相關問題