2 iframe的一个页面，第二个iframe来自动高度

Question

我想实现这个代码的第二个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> 

Answer 1

你可以用你的第二个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>